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

转载 2008年09月16日 23:23:00

客户端动态输出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>

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>

vision 0.3 【耗时3320ms】
基于vision 0.2中的代码,我们可以看到,整个代码段有多处用到了"body","window","document"这样的对象,在js中类似这样的对象都为全局对象,对他们的引用操作势必会消耗性能,
对这些全局变量引用要比简单通过局部变量引用的代价要昂贵的多。
这里我们可以将"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>
vision 0.4 【耗时2779ms】
一个document对象加载速度的优化就是在<script>标签指定defer属性。首先在这里简单介绍一下defer属性。defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题,
加上defer等于在页面完全在入后再执行,相当于window.onload,但应用上比window.onload 更灵活。设置这个属性仅适合不需要立即运行<SCRIPT>中代码的情况。
(立即运行的代码指不在函数体内的--这些代码将会在脚本块加载后立即执行)当defer属性设置后,IE不会等待加载和转换这段脚本。这就也为着页面加载会快很多。
通常这意味着立即运行的脚本应该封装放在一个函数内,并通过document或者body的onload的事件处理。如果你的脚本是依赖于页面加载后的用户动作,如点击按钮,或者移动鼠标到某个区域,会更加有用!
最后请注意两点:
1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
2、不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
<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");
  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>
 
 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>

vision 0.6 【耗时2580ms】
这个版本中我们要调优的是修改table的css属性,使用fixed-table布局(layout)。指定了fixed-table布局后的表格的列宽使用<col>标签设置。
fixed-table布局样式将改善table的性能,因为每个单元格的内容的尺寸不需要进行计算了。这是一个非常实用的性能改善方法,特别是那些有很多列的大型表格。
这个操作也可以通过简单增加css样式实现:
<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";
  _table.style.tableLayout = "fixed";
  _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>

vision 0.7 【耗时2210ms】
最后的一个版本的调优就是给单元格赋值的方式。在所有的示例中,创建了一个TextNode,并添加给TD。而在这个版本中我们将使用innerText代替插入一个text节点,代码调整为:
td.innerText = "Text";
(注意:innerText只在IE中受支持,属于IE扩展,兼容FireFox可使用innerHTML,但是innerHTML正如文章开头所说的,效率非常低下,不建议使用)
<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";
  _table.style.tableLayout = "fixed";
  _tbody = _doc.createElement("tbody");
 
  docBody.insertBefore(_table, null);
  _table.insertBefore(_tbody, 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");
   td.innerText = "Text";
   tr.insertBefore(td, null);
  }
  }
}
</script>
</body>
</html>

vision 0.8 【耗时672ms】终极优化
将字符串作为数组对象的方式是目前效率最高,性能最优的方式。
<script>
 var t1 = new Date();
</script>
<html>
 <head>
  <title></title>
  <script>
   function testTime(){
    var t2 = new Date();
    alert(t2-t1+"ms");
   }
  
  </script>
 
 </head>
 <body onload="init();testTime();">
  <div id="tableDiv"></div>
  <script>
   var maxRow =3000;
   var maxCol = 8;
   var strTbody = ["<table border='1'><tbody>"];
  
   for(var i = 0; i < maxRow; i++){
    strTbody.push("<tr>");
     for(var j = 0; j < maxCol; j++){
      strTbody.push("<td>test</td>");
     }
    strTbody.push("</tr>");
   }
  
   strTbody.push("</tbody></table>");
  
   var obj = document.getElementById("tableDiv");
   obj.innerHTML = strTbody.join("");
  </script>
 </body>
</html>

来源:http://qihonghui1016.blog.163.com/blog/static/116397892007919101332430/

【前端页面优化】改善你的jQuery的25个步骤 千倍级效率提升

1、从Google Code加载jQuery Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你...
  • hj7jay
  • hj7jay
  • 2016年08月19日 14:48
  • 6706

JS性能优化

下面是一些关于客户端JS性能的一些优化的小技巧: 1.[顶]关于JS的循环,循环是一种常用的流程控制。JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中 for(...
  • Steven_ssm
  • Steven_ssm
  • 2017年08月04日 19:35
  • 47

DataTable数据检索的性能分析

我们知道在.NET平台上有很多种数据存储,检索解决方案-ADO.NET Entity Framework,ASP.NET Dynamic Data,XML, NHibernate,LINQ to SQ...
  • dz45693
  • dz45693
  • 2016年11月21日 11:48
  • 723

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

客户端动态输出table数据并展示表格,是web应用中较为常见的工作。对于循环打印输出tr,td本身是一件非常僵硬和暴力的编程办法,再加上最后绑定元素innerHTML字符流输出,系统所消耗的性能代价...
  • baitiandeye
  • baitiandeye
  • 2010年09月16日 17:28
  • 1240

JavaScript如何动态生成表格

html> html lang="en"> head> meta charset="UTF-8"> title>动态生成表格title> script type="text/j...
  • pangqiandou
  • pangqiandou
  • 2017年04月23日 11:09
  • 4058

使用JS创建table的高效方法

http://hotpepper.iteye.com/blog/235902 项目开发中,为了提高用户体验,查询时使用dwr向后台发送查询请求,然后根据查询结果异步更新页面中table的内容。  ...
  • weisuochengxuyuan
  • weisuochengxuyuan
  • 2013年12月20日 09:17
  • 933

HTML5性能优化

HTML5性能优化           在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那...
  • github_39500961
  • github_39500961
  • 2017年07月14日 16:55
  • 388

Javascript中给动态生成的表格添加样式,JavaScript里setAttribute的问题

bgcolor是HTML,bgColor是JScript,backgroundColor是javascript JavaScript语言的前身叫作LiveScript。自从Sun公司推出著名的Java...
  • yuhua3272004
  • yuhua3272004
  • 2008年11月20日 16:49
  • 2477

JavaScript:一维数组动态生成N行N列table表格

var lines=Math.ceil(data.data.length/5);//显示行数 for(var j=0;j
  • wudalang_gd
  • wudalang_gd
  • 2016年11月30日 17:23
  • 796

前端性能优化总结

我的前端学习历程   很难想象一个半年前还在做后台开发,对前端知之甚少的我,现在也可以从事前端开发了。这半年的学习过程将会是我人生一笔宝贵的财富,这让我想到一句话“在成长的道路上,我们不...
  • cometwo
  • cometwo
  • 2016年04月08日 14:02
  • 5372
收藏助手
不良信息举报
您举报文章:Javascript动态生成表格的性能调优
举报原因:
原因补充:

(最多只允许输入30个字)