JavaScript拼接HTML字符串的三种方法及性能对比

JavaScript拼接HTML字符串的三种方法及性能对比

在JavaScript开发中，动态生成HTML字符串是常见需求，不同的拼接方式对性能有着显著影响。

var arr = ['item 1', 'item 2', 'item 3', ...];
list = '';
for (var i = 0,
l = arr.length; i < l; i++) {
list += '' + arr[i] + '';
}
list = '' + list + '';

这是最直观且常见的写法，但其执行效率最低，且代码逻辑相对繁琐。

第二种：逐个 push 进数组

第二种方法是将元素逐个push进数组，最后合并：

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0,
l = arr.length; i < l; i++) {
 list[list.length] = '' + arr[i] + '';
}
list = '' + list.join('') + '';

相比第一种字符串直接相加的方式，这种方法速度稍快，但并非最优解。

第三种：直接join()

第三种方法则是直接利用数组的join()方法：

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '' + arr.join('') + '';

调用原生方法（如join()）通常比手动循环拼接快得多，且代码更为简洁易读。

浏览器性能测试

为了验证上述结论，我们进行了浏览器性能测试：

测试使用长度为130的数组，元素长度各异以避免浏览器对固定长度字符串的特殊优化。每种方法执行1000次，记录耗时结果如下：