Javascript动态生成表格的性能调优
2010-09-14 13:09:03 来源：WEB开发网最后的一个版本的调优就是给单元格赋值的方式。在所有的示例中，创建了一个TextNode，并添加给TD。而在这个版本中我们将使用innerText代替插入一个text节点，代码调整为：
td.innerText = "Text";
（注意：innerText只在IE中受支持，属于IE扩展，兼容FireFox可使用innerHTML，但是innerHTML正如文章开头所说的，效率非常低下，不建议使用）
<html>
<body onload="init()">
<script defer>
function init() {
var _table, _tbody, tr, td, text, maxRow, maxCol;
var docBody = document.body;
var _doc = document;
maxRow = 3000;
maxCol = 8;
_table = _doc.createElement("table");
_table.border = "1";
_table.style.tableLayout = "fixed";
_tbody = _doc.createElement("tbody");
docBody.insertBefore(_table, null);
_table.insertBefore(_tbody, null);
for (var i=0; i<maxRow; i++) {
tr = _doc.createElement("tr");
_tbody.insertBefore(tr, null);
for(var j = 0; j<maxCol; j++){
td = _doc.createElement("td");
td.innerText = "Text";
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
vision 0.8 【耗时672ms】终极优化
将字符串作为数组对象的方式是目前效率最高，性能最优的方式。
<script>
var t1 = new Date();
</script>
<html>
<head>
<title></title>
<script>
function testTime(){
var t2 = new Date();
alert(t2-t1+"ms");
}
</script>
</head>
<body onload="init();testTime();">
<div id="tableDiv"></div>
<script>
var maxRow =3000;
var maxCol = 8;
var strTbody = ["<table border='1'><tbody>"];
for(var i = 0; i < maxRow; i++){
strTbody.push("<tr>");
for(var j = 0; j < maxCol; j++){
strTbody.push("<td>test</td>");
}
strTbody.push("</tr>");
}
strTbody.push("</tbody></table>");
var obj = document.getElementById("tableDiv");
obj.innerHTML = strTbody.join("");
</script>
</body>
</html>
来源：http://qihonghui1016.blog.163.com/blog/static/116397892007919101332430/
Tags：Javascript 动态 生成
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript动态生成表格的性能调优”更多相关内容
中查找“Javascript动态生成表格的性能调优”更多相关内容更多精彩
赞助商链接
