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

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

　2010-09-14 13:09:03　来源：WEB开发网　　　

核心提示： vision 0.2 【耗时3623ms】这个版本的代码有非常大的改进，采用DOM技术动态添加元素，Javascript动态生成表格的性能调优(2)，说明在需要处理展现大量数据的情况下，运用DOM快速定位并添加绑定元素的方法，整个代码段有多处用到了"body",&quo

vision 0.2 【耗时3623ms】

这个版本的代码有非常大的改进，采用DOM技术动态添加元素，说明在需要处理展现大量数据的情况下，运用DOM快速定位并添加绑定元素的方法，效率远比拼接html元素字符串的方法要高许多。

整个页面加载完成所耗的时间为3623毫秒。3000行的记录耗时不到4秒，这个版本的代码结构和编程思路也无可挑剔，那么这样的加载速度是否可以再快些呢？

<html> <body> <script> 　var _table, _tbody, tr, td, text, maxRow, maxCol; 　maxRow = 3000; 　maxCol = 8; 　　_table = document.createElement("table"); 　_table.border = "1"; 　_tbody = document.createElement("tbody"); 　_table.insertBefore(_tbody, null); 　　document.body.insertBefore(_table, null); 　for (var i=0; i<maxRow; i++) { 　tr = document.createElement("tr"); 　for(var j = 0; j<maxCol; j++){ 　 td = document.createElement("td"); 　 text = document.createTextNode("Text"); 　 td.insertBefore(text, null); 　 tr.insertBefore(td, null); 　} 　　 _tbody.insertBefore(tr, null); 　} </script> </body> </html>