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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.