Re-discussion on the performance _javascript of the string connection in JavaScript

1 How do I connect a string?

First, let's review two common methods of string concatenation:
1.1 Using string concatenation operators

Commonly used languages (such as Java, C #, PHP, etc.) have string concatenation operators, JavaScript is no exception, code example:

Copy Code code as follows:

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

1.2 Using Arrays

In commonly used languages, the performance of string concatenation operations is generally low, and for this purpose in C # StringBuilder (StringBuffer provided in Java) is specifically provided for connection strings. In JavaScript there is a scenario for simulating StringBuilder through an array.

Copy Code code as follows:

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

2 Test

The following procedure is used to test the performance of two methods by copying a string:
2.1 Copying by string concatenation operators:

Copy Code code as follows:

function Copybyoperator (str, times) {
var newstr = "";
for (var i = 0; I < times; i++) {
Newstr + + str;
}
return newstr;
}

2.2 Replication by array:

Copy Code code 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 ie under the test

In view of the poor performance of IE, first use the small Times value (6000) in IE 6, ie 7 and IE 8 under the test. Run 10 times after the average, the result is as follows:

The test results in IE browser

Browser	Copybyoperator	Copybyarray
IE 6	1780.4ms	9.5ms
IE 7	1754.6ms	7.7ms
IE 8	1.6ms	9.4ms

IE6, 7 and IE8 test results are far apart, it is clear thatIE 8 for string concatenation operation optimization, efficiency is higher than the array copy method .

2.4 Testing under various browsers

Next, use the larger times value (50000) to test the latest version of the various browsers.

Test results for various browsers

Browser	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

The result was a surprise. The string concatenation operation under IE 8 has defeated the chrome-less browsers, and those who say IE have low performance may want to pay attention. In Chrome, however, the string concatenation operation is more efficient than the array copy method.

3 Summary

Browser performance continues to improve, as a front-end engineers, also need to adjust the JavaScript program optimization strategy to achieve the best performance.