html数组字符串拼接的最快方法_javascript技巧
程序员文章站
2024-01-26 18:28:22
...
第一种:逐个字符串相加
var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i list += '' + arr[i] + '';
}
list = '
这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0, l = arr.length; i list[list.length] = '' + arr[i] + '';
}
list = '
比上一种方法稍微快一些,但还是不够好…
第三种:直接join()
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '
使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。
浏览器性能
每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:
复制代码 代码如下:
var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i list += '
}
list = '
- ' + list + '
这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
复制代码 代码如下:
var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0, l = arr.length; i list[list.length] = '
}
list = '
- ' + list.join('') + '
比上一种方法稍微快一些,但还是不够好…
第三种:直接join()
复制代码 代码如下:
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '
- ' + arr.join('
- ') + '
使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。
浏览器性能
每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:
推荐阅读
-
javascript对数组的常用操作代码 数组方法总汇_javascript技巧
-
判断一个变量是数组Array类型的方法_javascript技巧
-
终于解决了IE8不支持数组的indexOf方法_javascript技巧
-
Fastest way to build an HTML string(拼装html字符串的最快方法)_javascript技巧
-
JavaScript用字符串和数组两种方法获取文本框的值(代码教程)
-
javascript对数组的常用操作代码 数组方法总汇_javascript技巧
-
数组方法解决JS字符串连接性能问题有争议_javascript技巧
-
JavaScript中将一个值转换为字符串的方法分析[译]_javascript技巧
-
Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧
-
js截取字符串的两种方法及区别详解_javascript技巧