WEB开发网
开发学院网页设计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>

1 2 3 4 5 6  下一页

Tags:Javascript 动态 生成

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