IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

JavaScript性能优化--创建表格

前端技术 2009-12-03 22:40:07 累计浏览 3,255 次
本机暂存

    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

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  3. WEB系统需要关注的一些点 (累计阅读 18,219)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,735)