解析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内核提供的一些特殊方法慎用。
第一种: 直接操作dom。
复制代码 代码如下:
BR>"http://www.w3.org/TR/html4/loose.dtd">
第二种,借助借助createDocumentFragment。
复制代码 代码如下:
BR>"http://www.w3.org/TR/html4/loose.dtd">
第三种:借助js的原生表格操作方法
复制代码 代码如下:
BR>"http://www.w3.org/TR/html4/loose.dtd">
以上可以看出用原生的js创建表格效率最好,借助createDocumentFragment优势不是很大(并不像网上说的那么明显),借助insertRow和insertCell等在ie6、7下效率太低,不建议使用。
对第一种算法简单的优化了一下:
复制代码 代码如下:
BR>"http://www.w3.org/TR/html4/loose.dtd">
总结:对dom操作尽量使用createElement和appendChild,对于js内核提供的一些特殊方法慎用。
上一篇: WordPress网站的菜单栏无法展开
下一篇: Web图片优化总结
推荐阅读
-
解析js原生方法创建表格效率测试_javascript技巧
-
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧
-
解析js原生方法创建表格效率测试_javascript技巧
-
js unicode 编码解析关于数据转换为中文的两种方法_javascript技巧
-
js unicode 编码解析关于数据转换为中文的两种方法_javascript技巧
-
原生JS和JQuery动态添加、删除表格行的方法_javascript技巧
-
js中apply方法的使用详细解析_javascript技巧
-
js中apply方法的使用详细解析_javascript技巧
-
JS判定是否原生方法_javascript技巧
-
JS下高效拼装字符串的几种方法比较与测试代码_javascript技巧