Some issues you must know about the performance of string concatenation in JavaScript_Basic knowledge

The core of JavaScript is ECMAScript. Similar to other languages, ECMAScript strings are immutable, that is, their values ​​cannot be changed.

Consider the following code:

Copy the code The code is as follows:

var str = "hello ";
str = "world";In fact, the steps performed by this code behind the scenes are as follows:

1. Create the character that stores "hello " string.
2. Create a string to store "world".
3. Create a string to store the connection result.
4. Copy the current content of str to the result.
5. Copy "world" into the result.
6. Update str so that it points to the result.

Steps 2 to 6 are performed every time string concatenation is completed, making this operation very resource intensive. If this process is repeated hundreds, or even thousands, of times, it can cause performance problems. The solution is to use an Array object to store the string and then use the join() method (parameter is an empty string) to create the final string. Imagine replacing the previous code with the following code:

Copy the code The code is as follows:

var arr = new Array();
arr[0] = "hello ";
arr[1] = "world";
var str = arr.join("");

In this way, no matter how many strings are introduced into the array, it will not be a problem, because the join operation only occurs when the join() method is called. At this point, the steps to perform are as follows:

1. Create the strings to store the results
2. Copy each string to the appropriate location in the result
While this solution is good, there is a better way. The problem is, this code doesn't reflect exactly what it's intended to do. To make it easier to understand, you can wrap the functionality with the StringBuffer class:

Copy the code The code is as follows:

function StringBuffer () {
this._strings_ = new Array();
}

StringBuffer.prototype.append = function(str) {
this._strings_.push(str);
};

StringBuffer.prototype.toString = function() {
return this._strings_.join("");
};

The first thing to pay attention to in this code is strings Attributes are meant to be private attributes. It has only two methods, namely append() and toString() methods. The append() method has a parameter, which appends the parameter to the string array. The toString() method calls the join method of the array and returns the actual concatenated string. To concatenate a set of strings using StringBuffer objects, you can use the following code:

Copy the code The code is as follows:

var buffer = new StringBuffer ();
buffer.append("hello ");
buffer.append("world");
var result = buffer.toString();

Based on the above implementation, let’s compare the running time, that is, use " " to connect strings and our encapsulated tools one by one. The following code can be used to test the performance of StringBuffer objects and traditional string concatenation methods. Enter the code in the chrome console and run:

Copy code The code is as follows:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i ) {
str = "text";
}
var d2 = new Date();

console.log("Concatenation with plus: "
(d2.getTime() - d1.getTime()) " milliseconds");

var buffer = new StringBuffer();
d1 = new Date();
for (var i=0; i < 10000; i ) {
buffer.append("text") ;
}
var result = buffer.toString();
d2 = new Date();

console.log("Concatenation with StringBuffer: "
(d2.getTime() - d1.getTime()) " milliseconds");

This code performs two tests for string concatenation, the first using the plus sign and the second using the StringBuffer class. Each operation concatenates 10,000 strings. The date values ​​d1 and d2 are used to determine how long it takes to complete the operation. Please note that when creating a Date object without parameters, the current date and time are assigned to the object. To calculate how long the join operation took, subtract the millisecond representation of the date (using the return value of the getTime() method). This is a common way to measure JavaScript performance. The results of this test can help you compare the efficiency of using the StringBuffer class versus using the plus sign.

The results of the above example are as follows:

Then some people may say that the String object in JavaScript also encapsulates a concat() method. We will also use the concat() method below to do the same thing. Enter the following code in the consoel:

Copy code The code is as follows:

var d1 = new Date();
var str = "";
for (var i=0; i < 10000; i ) {
str.concat("text");
}
var d2 = new Date();

console.log("Concatenation with plus: "
(d2.getTime() - d1.getTime()) " milliseconds");

We can see that it is done 10000 times The time it takes to concatenate characters is:

It can be concluded that when it comes to a certain number of string connections, we can improve performance by encapsulating a StringBuffer object (function) similar to Java in Javascript to perform operations.