Fastest way to build an HTML string

最新推荐文章于 2025-08-16 09:42:10 发布

gghunter

最新推荐文章于 2025-08-16 09:42:10 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

文章标签： string build html list chrome safari

本文链接：https://blog.youkuaiyun.com/gghunter/article/details/4263401

本文探讨了三种构建HTML字符串的方法及其性能差异：字符串拼接、数组追加再使用join方法，以及直接利用join方法。通过实验发现，在多数浏览器中，直接使用join方法效率最高，但在Chrome中情况有所不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fastest way to build an HTML stringPosted in ' Code Snippets, JavaScript' by James on May 29th, 2009
原文： http://james.padolsey.com/javascript/fastest-way-to-build-an-html-string/
var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';
for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr + '</li>';
}
list = '<ul>' + list + '</ul>';//最低效的方式。
var arr = ['item 1', 'item 2', 'item 3', ...],    list = [];for (var i = 0, l = arr.length; i < l; i++) {    list[list.length] = '<li>' + arr + '</li>';}list = '<ul>' + list.join('') + '</ul>';;//比上一种的方式快。

var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';;//最优的方式。
执行1000 次:“String concat”
(ms)
“Array pushing”
(ms)
“Native join()”
(ms)
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
只有chrome比较特别,第一种方法反而是最快的。