Javascript动态生成表格的性能调优
2010-09-14 13:09:03 来源：WEB开发网vision 0.5 【耗时2650ms】
上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。
我们看到代码中dom操作，绑定子元素的方法是由下至上包裹，这样的元素绑定方式会相对较慢。
create <TR>第一步 insert TextNode into <TD>
create <TD>
create TextNode
第二步 insert <TD> into <TR>
第三步 insert <TR> into TBODY
现在我们将元素的绑定顺序颠倒过来，由上至下的包裹绑定元素
create <TR>第一步 insert <TR> into TBODY
create <TD>
create TextNode
第二步 insert <TD> into <TR>
第三步 insert TextNode into <TD>
<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";
_tbody = _doc.createElement("tbody");
_table.insertBefore(_tbody, null);
docBody.insertBefore(_table, 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");
text = _doc.createTextNode("Text");
td.insertBefore(text, null);
tr.insertBefore(td, null);
}
}
}
</script>
</body>
</html>
Tags：Javascript 动态 生成
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript动态生成表格的性能调优”更多相关内容
中查找“Javascript动态生成表格的性能调优”更多相关内容更多精彩
赞助商链接
