WEB开发网
开发学院网页设计JavaScript Javascript动态生成表格的性能调优 阅读

Javascript动态生成表格的性能调优

 2010-09-14 13:09:03 来源:WEB开发网   
核心提示: vision 0.5 【耗时2650ms】上一个版本中的页面加载速度已经缩短到了2779ms,下面我们对代码进行进一步的优化,Javascript动态生成表格的性能调优(5),我们看到代码中dom操作,绑定子元素的方法是由下至上包裹,这样的元素绑定方式会相对较慢,create <TR

vision 0.5 【耗时2650ms】

上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。

我们看到代码中dom操作,绑定子元素的方法是由下至上包裹,这样的元素绑定方式会相对较慢。

 create <TR>
 create <TD>
 create TextNode
第一步 insert TextNode into <TD>

第二步 insert <TD> into <TR>

第三步 insert <TR> into TBODY

现在我们将元素的绑定顺序颠倒过来,由上至下的包裹绑定元素

 create <TR>
 create <TD>
 create TextNode
第一步 insert <TR> into TBODY

第二步 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>

上一页  1 2 3 4 5 6 7  下一页

Tags:Javascript 动态 生成

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接