Discussing the performance of string concatenation under Javascript_javascript skills

1 How to perform string concatenation?

First let us review the two common methods of string concatenation:
1.1 Use the string concatenation operator

Commonly used languages ​​( Such as Java, C#, PHP, etc.) all have string concatenation operators, and Javascript is no exception. Code example:

Copy code The code is as follows:

var str = "";
str = str "a";

1.2 Using arrays

In commonly used languages, the performance of string concatenation operations is generally not high. For this reason, StringBuilder is provided in C# (StringBuffer is provided in Java) for concatenating strings. In Javascript, there is a solution to simulate StringBuilder through Array.

Copy code The code is as follows:

var str = [];
for (var i = 0; i < 100; i ) {
str[i] = "12345";
}
str = str.join("");

2 Test

The following tests the performance of the two methods through the process of copying strings:
2.1 Copying through the string concatenation operator:

Copy code The code is as follows:

function copyByOperator(str, times) {
　var newStr = "";
　for (var i = 0; i < times; i ) {
　 newStr = str;
　}
return newStr;
}

2.2 Copy through array:

Copy code The code is as follows:

function copyByArray(str, times) {
var newStr = [];
for (var i = 0; i < times; i ) {
newStr[i] = str;
}
　return newStr.join("");
}

str uses a fixed HTML string with a length of 61.
2.3 Test under IE

Considering that the performance of IE is relatively poor, first use a small times value (6000) to test under IE 6, IE 7 and IE 8. Taking the average value after running 10 times, the results are as follows:

IE浏览器下的测试结果

浏览器	copyByOperator	copyByArray
IE 6	1780.4ms	9.5ms
IE 7	1754.6ms	7.7ms
IE 8	1.6ms	9.4ms

The test results of IE6, 7 and IE8 are far apart. It is obvious that IE 8 has optimized the string concatenation operation, and the efficiency is already higher than the array copy method .

2.4 Testing under various browsers

The following uses a relatively large times value (50000) to test the latest versions of various browsers.

各种浏览器的测试结果

浏览器	copyByOperator	copyByArray
IE 8	21.8ms	54.7ms
Firefox 3.6	40.9ms	27.9ms
Chrome 4	4.4ms	10.9ms
Safari 4.0.5	41.6ms	34.6ms
Opera 10.50	33.1ms	23ms

This result is really unexpected. The string concatenation operation under IE 8 actually defeats all browsers except Chrome. Those who always say that IE performance is low should pay attention. In Chrome, string concatenation operations are more efficient than array copying methods.

3 Summary

The performance of browsers is constantly improving. As a front-end engineer, you must also adjust the optimization strategy of Javascript programs in a timely manner to obtain the best performance.