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

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

 2010-09-14 13:09:03 来源:WEB开发网   
核心提示: 对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多,这里我们可以将"document.body"的引用缓存到局部变量中,Javascript动态生成表格的性能调优(3),这样就完成了一个将全局对象转换成局部变量的过程,在代码中添加:var docBody = d

对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。

这里我们可以将"document.body"的引用缓存到局部变量中,这样就完成了一个将全局对象转换成局部变量的过程。

在代码中添加:var docBody = document.body;并且将行:document.body.insertBefore(_table, null);替换为:docBody.insertBefore(_table, null);

在代码中对"document"单个全局对象的引用就达到8×3000=24000次之多,获取一个document变量比局部变量大约多花费4ms时间, 所以我们下一步把document对象也缓存起来。

在代码中添加:var _doc = document;

这样,我们重新加载页面,所耗时间为3320毫秒。只比上个版本所耗的时间减少了10%,似乎性能相差不大,但是在我们日常的开发习惯中,将全局的对象缓存到局部变量中是一个好的开始。

<html>
<body>
<script>
 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");
 for(var j = 0; j<maxCol; j++){
  td = _doc.createElement("td");
  text = _doc.createTextNode("Text");
  td.insertBefore(text, null);
  tr.insertBefore(td, null);
 }
   _tbody.insertBefore(tr, null);
 }
</script>
</body>
</html>

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

Tags:Javascript 动态 生成

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