JavaScript性能优化--创建表格
source link: https://blogread.cn/it/article/764?f=hot1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
JavaScript性能优化--创建表格
JavaScript创建表格的方法很多。
可以使用createElement方法来创建table，tbody，tr，td，然后使用createTextNode创建文本，最后使用appendChild来添加元素。
http://cssrain.cn/demo/cccreatetable/demo1.html
也可以使用HTML专门的创建表格行，列的方法（insertRow（），insertCell() ）。
http://cssrain.cn/demo/cccreatetable/demo2.html
也可以使用字符串的方法拼接。
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技术博客大学习
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK