本文转自:http://hi.baidu.com/jz1108/blog/item/81ebe6b4561c247b8ad4b2ef.html
一日,同事说他习惯用inserRow和insertCell方法操作table元素,并说这个效率要比createElement和appendChild来的高。我不信,于是做了如下试验:使用不同方式创建一个1000行X10列的表格,对比代码所耗时间。
方法一:使用insertRow和insertCell
var table = document.createElement("table");
document.body.appendChild(table);
for (var i = 0; i < 1000; i ++){
var row = table.insertRow(table.rows.length);
for (var j = 0; j < 10; j ++){
var cell = row.insertCell(row.cells.length);
cell.innerHTML = "(" + i + ", " + j + ")";
}
}
以上代码执行时间为:172.688秒,整个过程中CPU占用率飙升到100%,IE也进入装死的状态。
方法二:使用createElement和appendChild
var table = document.createElement("table");
document.body.appendChild(table);
var tbody = document.createElement("tbody");
table.appendChild(tbody);
for (var i = 0; i < 1000; i ++){
var row = document.createElement("tr");
tbody.appendChild(row);
for (var j = 0; j < 10; j ++){
var cell = document.createElement("td");
cell.innerHTML = "(" + i + ", " + j + ")";
row.appendChild(cell);
}
}
以上代码执行时间为:3.026秒,速度提高这么多。
当然这还不是最快的,请看方法三:
var htmls = [];
htmls.push("<table>");
for (var i = 0; i < 1000; i ++){
htmls.push("<tr>")
for (var j = 0; j < 10; j ++){
htmls.push("<td>(" + i + ", " + j + ")</td>");
}
htmls.push("</tr>");
}
htmls.push("</table>");
document.getElementById("div1").innerHTML = htmls.join("");
这段代码执行时间是0.281秒。
可见使用innerHTML方式是最快的,createElement和appendhChild其次,最慢的是insertRow和insertCell。
分享到:
相关推荐
Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...
JavaScript操作表格JavaScript操作表格JavaScript操作表格
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
关于javascript 的表格操作的一些函数集合
javascript 表格操作
javascript 的几种排序方法
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
比较几个流行的JavaScript框架的性能
经过多次应用后总结的对表格的经典操作,动态增加行,删除行,全选,删除全部等等...
javascript动态增删表格行
javascript操作表格
JavaScript动态操作表格,添加,删除行、列及单元格
javascript操作表格的各种方法,多种源代码的集合.呵呵.整理好几天了
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种方法,看下面的解决和使用方法
JavaScript表格类特效,如动态表格等
静态实现javascript,实现表格的增加和删除等功能,值得初学者学习
真正的javascript的实现的表格列可以伸缩的工具 非Ext
Javascript DataTables 表格控件,非常好的表格控件,可以在PHP、java、DotNet中使用。