欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-13 18:19:10
...
我们先看一下三种算法以及在各种浏览器下的表现。
第一种: 直接操作dom。
复制代码 代码如下:

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



New Web Project






第二种,借助借助createDocumentFragment。
复制代码 代码如下:

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



New Web Project






第三种:借助js的原生表格操作方法
复制代码 代码如下:

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



New Web Project






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

对第一种算法简单的优化了一下:
复制代码 代码如下:

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



New Web Project






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