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

客户端动态输出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秒。这样的页面数据加载是近乎灾难的，应该竭力避免。

 
  

  
 

vision 0.2 【耗时3623ms】
这个版本的代码有非常大的改进，采用DOM技术动态添加元素，说明在需要处理展现大量数据的情况下，运用DOM快速定位并添加绑定元素的方法，效率远比拼接html元素字符串的方法要高许多。
整个页面加载完成所耗的时间为3623毫秒。3000行的记录耗时不到4秒，这个版本的代码结构和编程思路也无可挑剔， 那么这样的加载速度是否可以再快些呢？

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％，似乎性能相差不大，但是在我们日常的开发习惯中，将全局的对象缓存到局部变量中是一个好的开始。

vision 0.4 【耗时2779ms】
一个document对象加载速度的优化就是在

 vision 0.5 【耗时2650ms】
 上一个版本中的页面加载速度已经缩短到了2779ms。下面我们对代码进行进一步的优化。
 我们看到代码中dom操作，绑定子元素的方法是由下至上包裹，这样的元素绑定方式会相对较慢。
  create
  create
  create TextNode
第一步 insert TextNode into
第二步 insert into
第三步 insert into TBODY
 
 现在我们将元素的绑定顺序颠倒过来，由上至下的包裹绑定元素
  create
  create
  create TextNode
第一步 insert into TBODY
第二步 insert into
第三步 insert TextNode into

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

vision 0.7 【耗时2210ms】
最后的一个版本的调优就是给单元格赋值的方式。在所有的示例中，创建了一个TextNode，并添加给TD。而在这个版本中我们将使用innerText代替插入一个text节点，代码调整为：
td.innerText = "Text";
（注意：innerText只在IE中受支持，属于IE扩展，兼容FireFox可使用innerHTML，但是innerHTML正如文章开头所说的，效率非常低下，不建议使用）

vision 0.8 【耗时672ms】终极优化
将字符串作为数组对象的方式是目前效率最高，性能最优的方式。


 
  
  
  
 
 
  

  
 
 

 

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