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。