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

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

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

核心提示：客户端动态输出table数据并展示表格，是web应用中较为常见的工作，Javascript动态生成表格的性能调优，对于循环打印输出tr，td本身是一件非常僵硬和暴力的编程办法，近15秒，这样的页面数据加载是近乎灾难的，再加上最后绑定元素innerHTML字符流输出，系统所消耗的性能代价是非常高昂的

客户端动态输出table数据并展示表格，是web应用中较为常见的工作。对于循环打印输出tr，td本身是一件非常僵硬和暴力的编程办法，再加上最后绑定元素innerHTML字符流输出，

系统所消耗的性能代价是非常高昂的，如果我们需要展现的数据非常庞大时，那么代价也是成倍的。然而这种动态输出表格的方法是大多数客户端程序员最常用的方法。那么基于最常用的方法，

如何才能降低性能成本，改善用户体验，快速安全的显示我们所需要的数据呢？

我认为从根本上调优需要从两个方面去考虑。

1：server的数据吐出和client的数据解析。这里涉及的知识点较多，今后再做详细的说明。但是对于较为复杂的xml的数据格式来说，client的解析应该用xpath寻址和dom内置对象相结合的方法，高速定位。

2：DHTML的优化。包括dom，css，js的优化，也就是MVC（model, view, control）的优化。

这里我们用js动态生成一个table，构建一个3000行，8列的表格，代码分多个版本，便于清晰的比较每个版本不同的性能消耗。

vision 0.1 【耗时14694ms】

貌似以下的写法是没有任何错误，但是确是最暴力，效率最低，性能消耗最大的写法。对于大量的数据行和列，用for循环拼接元素字符串，最后innerHTML输出是不可取的。

3000记录页面加载耗时14694毫秒，近15秒。这样的页面数据加载是近乎灾难的，应该竭力避免。

<html> <body> 　<div id="tableDiv"></div> 　<script> 　 var maxRow =3000; 　 var maxCol = 8；　 var strTbl = "<table border='1'><tbody>"; 　 var strTbody = ''; 　　 for(var i = 0; i < maxRow; i++){ 　　strTbody +="<tr>"; 　　 for(var j = 0; j < maxCol; j++){ 　　　strTbody += "<td>test</td>"; 　　 } 　　strTbody += "</tr>"; 　 } 　 strTbl = strTbody + "</tbody></table>"; 　　 var obj = document.getElementById("tableDiv"); 　 obj.innerHTML = strTbl; 　　</script> </body> </html>