JavaScript性能优化--创建表格
JavaScript创建表格的方法很多。
方法1:
可以使用createElement方法来创建table,tbody,tr,td,然后使用createTextNode创建文本,最后使用appendChild来添加元素。
http://cssrain.cn/demo/cccreatetable/demo1.html
方法2:
也可以使用HTML专门的创建表格行,列的方法(insertRow(),insertCell() )。
http://cssrain.cn/demo/cccreatetable/demo2.html
方法3:
也可以使用字符串的方法拼接。
http://cssrain.cn/demo/cccreatetable/demo3.html
说实话我也不太清楚哪种方法性能好,于是去网上搜索了下,刚好看到http://abaper.blogbus.com/logs/8278500.html 有 一篇性能对比文章,于是才知道结果。
性能对比测试:
http://cssrain.cn/demo/cccreatetable/demo4.html
结果对比:
目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号
方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。
方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。
方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串
方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。
运行时间比较:
| 方法 | 运行时间(ms) |
| 方法一 | 93037 |
| 方法二 | 3341 |
| 方法三 | 2795 |
| 方法四 | 500 |
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:cssrain@gmail.com(admin) 来源: 前端技术
- 标签: 表格
- 发布时间:2009-12-03 22:40:07
-
[918] WordPress插件开发 -- 在插件使用 -
[134] 解决 nginx 反向代理网页首尾出现神秘字 -
[54] 整理了一份招PHP高级工程师的面试题 -
[52] 海量小文件存储 -
[52] 如何保证一个程序在单台服务器上只有唯一实例( -
[52] 全站换域名时利用nginx和javascri -
[51] Innodb分表太多或者表分区太多,会导致内 -
[50] 用 Jquery 模拟 select -
[49] CloudSMS:免费匿名的云短信 -
[48] 分享一个JQUERY颜色选择插件
