连接JavaScript中字符串的最有效方法?


163

在JavaScript中,我有一个包含许多迭代的循环,并且在每个迭代中,我正在创建一个包含许多+=运算符的巨大字符串。有没有更有效的方式来创建字符串?我正在考虑创建一个动态数组,在该数组中不断向其中添加字符串,然后进行联接。谁能解释并举例说明最快的方法?


2
您将字符串用作什么?任何对此的性能提示,会根据环境变化,你的字符串,特定的JS引擎如何优化不同的操作等的大小
本·麦考密克


5
检查此链接jsperf.com/join-concat/2
rab

我正在使用IE9,但它处于IE8兼容模式(无法更改)。我将使用jquery将巨大的字符串插入DOM。
欧米茄

Answers:


135

基于JSPerf的基准测试,似乎是使用+=最快的方法,尽管不一定在每个浏览器中都使用。

对于在DOM中构建字符串,似乎最好先将字符串连接起来,然后添加到DOM中,而不是将其迭代添加到dom中。不过,您应该根据自己的情况进行基准测试。

(感谢@zAlbee进行更正)


1
查看链接的页面。好像+=和在数组上进行联接之间没有什么区别。
2013年

66%(对于IE9),将每个字符串添加到DOM中似乎比创建一个字符串然后将字符串添加到DOM更快。
欧米茄

链接页面对两个测试都使用+ =,没有.join()可见,因此这是一个毫无意义的测试,仅将噪声显示为任何“差异”。一个很好的示例,说明js可能多么嘈杂... dom比字符串慢,因此请谨慎使用。
dandavis

时间只是其中的一部分。对于迭代例程,我想知道各种方法之间对GC的影响是什么?
戴维·布拉德利

对于大字符串,由于字符串concat非常令人不快的内存错误bugs.chromium.org/p/v8/issues/detail?id=3175
mwag,

70

我对串联本身没有任何评论,但我想指出@Jakub Hampl的建议:

对于在DOM中构建字符串,在某些情况下,最好迭代地添加到DOM中,而不是立即添加一个巨大的字符串。

是错误的,因为它是基于有缺陷的测试。该测试实际上从未附加到DOM中。

这个固定的测试表明,在渲染字符串之前一次创建所有字符串的过程很多,速度更快。这甚至不是比赛。

(很抱歉,这是一个单独的答案,但是我没有足够的代表对此答案发表评论。)


4
我认为这值得作为一个答案,因为它包含一个测试和一个结论(尽管该测试基于/启发于另一个答案,但应该可以),无需后悔。
user202729 '18

14

自回答这个问题以来已经过去三年了,但是我还是会提供我的答案:)

实际上,接受的答案并不完全正确。Jakub的测试使用了硬编码字符串,该字符串允许JS引擎优化代码执行(Google的V8在这方面确实很棒!)。但是,一旦您使用完全随机的字符串(这里是JSPerf),则字符串连接将排在第二位。


有趣的是,在Windows计算机上使用Chrome 54和Firefox 45,concat的运行速度是其他两个使用您的版本的计算机的两倍。在其他两种浏览器中,IE 11的运行速度与非concat一样慢。
ShawnFumo

4
各个版本不同。我猜想,现在Chrome的VM可能针对这种情况进行了一些预优化。我在Chrome v53上再次进行了测试,现在串联是最快的解决方案:D相同的硬件,但不同的Chrome版本给出了完全不同的结果。
Volodymyr Usarskyy '16

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.