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