原文：
http://abaper.blogbus.com/logs/8278500.html
本来是想测试一下使用Javascript生成一个比较大的表格，大概需要多长时间，一直认为这会是一个比较固定的时间。期间用了几种不同的方法，发现效率相差太大了。下面是测试的具体说明：
目标：生成一个2000*5的表格，每个单元格的内容是行号+逗号+列号
方法一：使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充。
方法二：使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充。
方法三：拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
方法四：拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串。
运行时间比较:
| 方法 |
运行时间(ms) |
| 方法一 |
93037 |
| 方法二 |
3341 |
| 方法三 |
2795 |
| 方法四 |
500 |
具体的程序如下：
<html>
<head>
<title>test page</title>
<script type='text/javascript'>
<!--
function createTable() {
var t = document.createElement('table');
for (var i = 0; i < 2000; i++) {
var r = t.insertRow(0);
for (var j = 0; j < 5; j++) {
var c = r.insertCell(0);
c.innerHTML = i + ',' + j;
}
}
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable2() {
var t = document.createElement('table');
var b = document.createElement('tbody');
for (var i = 0; i < 2000; i++) {
var r = document.createElement('tr');
for (var j = 0; j < 5; j++) {
var c = document.createElement('td');
var m = document.createTextNode(i + ',' + j);
c.appendChild(m);
r.appendChild(c);
}
b.appendChild(r);
}
t.appendChild(b);
document.getElementById('table1').appendChild(t);
t.setAttribute('border', '1');
}
function createTable3() {
var data = '';
data += '<table border=1><tbody>';
for (var i = 0; i < 2000; i++) {
data += '<tr>';
for (var j = 0; j < 5; j++) {
data += '<td>' + i + ',' + j + '</td>';
}
data += '</tr>';
}
data += '</tbody><table>';
document.getElementById('table1').innerHTML = data;
}
function createTable4() {
var data = new Array();
data.push('<table border=1><tbody>');
for (var i = 0; i < 2000; i++) {
data.push('<tr>');
for (var j = 0; j < 5; j++) {
data.push('<td>' + i + ',' + j + '</td>');
}
data.push('</tr>');
}
data.push('</tbody><table>');
document.getElementById('table1').innerHTML = data.join('');
}
function showFunctionRunTime(f) {
var t1 = new Date();
f();
var t2 = new Date();
alert(t2 - t1);
}
//-->
</script>
</head>
<body>
<div id="table1" style="border: 1px solid black">
</div>
<script>
showFunctionRunTime(createTable);
showFunctionRunTime(createTable2);
showFunctionRunTime(createTable3);
showFunctionRunTime(createTable4);
</script>
</body>
</html>
分享到：
相关推荐
JavaScript创建表格的方法涵盖了使用原生JavaScript对DOM进行操作，以动态生成HTML表格的过程。这种方法不需要依赖任何外部库或框架，是学习Web前端开发的基础技能之一。接下来，我们将详细解释文件中提供的代码和...
JavaScript 动态创建表格知识点总结 JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用，特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...
使用JavaScript和DOM动态创建表格
标题中的“老裴帮助关于Javascript动态创建表格的小练习”指的是一个使用JavaScript编程语言来动态创建HTML表格的学习资源或教程。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它允许开发者在用户与网页...
Javascript动态创建表格 兼容google浏览器、360，ie等浏览器，很实用
利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种方法，看下面的解决和使用方法
在“createtable.html”这个文件中，很可能包含了实际的示例代码，演示了如何使用JavaScript创建表格和合并单元格。实际应用时，你可以参考这些代码，结合你的需求进行修改和扩展，以实现更复杂的表格布局和功能。 ...
而JavaScript实现的表格排序功能则能够帮助用户更方便地管理和理解这些数据。这篇我们将深入探讨如何使用JavaScript实现表格排序，包括对数字、日期和汉字的排序。 首先，我们需要理解HTML表格的基本结构，通常由`...
在JavaScript中动态创建表格是一项常见的任务，特别是在网页交互和数据展示中。本文将深入探讨如何利用JavaScript的`insertRow()`和`insertCell()`方法来添加行和单元格，以及如何使用`deleteRow()`和`deleteCell()`...
本篇内容主要介绍了使用JavaScript进行表格操作的方法，包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术，可以实现更加灵活的...
在本文中，我们将通过实例代码来介绍如何使用 Javascript 实现表格操作，包括获取表格值、创建表格等。 获取表格值 在 HTML 中，表格是通过 `<table>` 元素来表示的，而每个表格单元格则是通过 `<td>` 元素来表示...
创建表JS createTable.js是一个旨在仅使用 javascript 快速轻松地创建 html 表格的库。 下载 版本 版本 0.1 如何使用此代码 见文件 接触 开发商/公司 主页：建设中 电子邮箱： 推特：
1. **创建表格**：在HTML中，`<table>`元素是用于创建表格的基础，通过`<tr>`（表格行）、`<td>`（表格数据单元）和`<th>`（表头单元）来构建具体的结构。JavaScript可以用于动态生成或修改这些元素，使表格更具动态...
1. **创建表格**：首先，你需要在HTML中设置一个空的表格容器，然后使用JavaScript创建表格元素。 ```javascript var table = document.createElement('table'); var thead = document.createElement('thead'); var...
### JavaScript 动态创建表格详解 在Web开发中，经常需要使用JavaScript来动态地创建或修改HTML表格元素，以响应用户的交互操作或是展示变化的数据。本文将详细介绍如何使用JavaScript中的`appendChild()`, `...
用javascript编译的 javascript创建对话表格.html
javaScript动态创建表格