《使用Javascript动态创建表格,不同的方法,巨大的运行时间差异!》的继续讨论

此篇文章为《使用Javascript动态创建表格,不同的方法,巨大的运行时间差异!》的继续讨论,原文章地址为:http://abaper.blogbus.com/logs/8278500.html

目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号+列号

方法一:使用createElement生成表格,使用insertRow和insertCell方法生成行列,单元格的内容使用innerHTML属性进行填充。

方法二:使用createElement生成表格,使用CreateElement方法生成行列,单元格的内容使用了createTextNode方法填充。

方法三:拼接表格innerHTML属性的字符串,使用字符串 += 操作符链接字符串

方法四:拼接表格innerHTML属性的字符串,各个字符串追加数组里面,最后调用数组的join方法生成目标字符串。

—————————————————————————————————-

根据dofy网友的反馈,重新做了测试。

ff下没有反映是因为有脚本错误,insertRow,insertCell两个方法在ff中必须带参数,我已经修改了原来的测试代码。

对我本机有环境的几个浏览器进行了重新测试,结果如下:

浏览器 方法一 方法二 方法三 方法四
IE 7 31503 1749 6713 312
FF 3.0.10 1128 470 277 224
chrome 3.0.195.33 154 87 157 185
测试结果总结:
1、对方法一中使用标准DOM对表格操作方法的支持中,IE7的性能最差。
2、ff 3和chrome 3对字符串的“+”操作都做了优化,在chrome下面“+”操作的性能甚至比array.join()还好,这点是我没有想到的。和在Java中虚拟机对“+”操作的优化类似,我感觉以后以牺牲代码可读性进行优化的必要性变得越来越小。
3、chrome的性能确实很强,尤其是对方法二使用的createElement类方法的支持。

4 Responses

Subscribe to comments with RSS.

  • alice says:

    zhen de hen pei fu ni,zi ji de shu ru fa du bu hui zhang

  • 不得不说 says:

    我一般看过用过就算了,不评论的.
    不过这是我的第一次,因为写的太好了,经典中的经典啊

    特别是第四个方法array.join(),打破了innerHTML的+=的魔咒

  • 不得不说 says:

    我一般看过用过就算了,不评论的.
    不过这是我的第一次,因为写的太好了,经典中的经典啊

    特别是第四个方法array.join(),打破了innerHTML的+=的魔咒

  • tunpishuang says:

    恩。insertRow(0) insertCell(0)