javascript几种操作表格方法的性能对比

?

本文转自：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。