解析js原生方法创建表格效率测试

我们先看一下三种算法以及在各种浏览器下的表现。
第一种： 直接操作dom。

复制代码 代码如下:

"http://www.w3.org/TR/html4/loose.dtd">

   
       
       
   
   
   
   

第二种，借助借助createDocumentFragment。

复制代码 代码如下:

"http://www.w3.org/TR/html4/loose.dtd">

   
       
       
   
   
   
   

第三种：借助js的原生表格操作方法

复制代码 代码如下:

"http://www.w3.org/TR/html4/loose.dtd">






   

以上可以看出用原生的js创建表格效率最好，借助createDocumentFragment优势不是很大（并不像网上说的那么明显），借助insertRow和insertCell等在ie6、7下效率太低，不建议使用。

对第一种算法简单的优化了一下：

复制代码 代码如下:

"http://www.w3.org/TR/html4/loose.dtd">

   
       
       
   
   
   
   

总结：对dom操作尽量使用createElement和appendChild，对于js内核提供的一些特殊方法慎用。