You must know some issues about the performance of string connection in JavaScript _ basic knowledge

In each programming language, character seek connections are involved, and this small character seek connection problem may affect the overall performance of the system, this article mainly discusses the performance of string connection in JavaScript, while ECMAScript is the core of JavaScript. Similar to other languages, the strings of ECMAScript are unchangeable, that is, their values cannot be changed.

Consider the following code:

The Code is as follows:

Var str = "hello ";
Str + = "world"; in fact, the steps behind this Code are as follows:

1. Create a string that stores "hello.
2. Create a string for storing "world.
3. Create a string that stores the connection result.
4. Copy the current content of str to the result.
5. Copy "world" to the result.
6. Update str to point it to the result.

Each time the string connection is completed, steps 2 to 6 are executed, which consumes a lot of resources. If you repeat this process several hundred or even thousands of times, it will cause performance problems. The solution is to use an Array object to store strings, and then use the join () method (the parameter is a Null String) to create the final string. Imagine Replacing the previous code with the following 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 in the array, the join operation occurs only when the join () method is called. The procedure is as follows:

1. Create a string for storing results
2. copy each string to a proper position in the result.
Although this solution is good, there are still better methods. The problem is that this code does not exactly reflect its intent. To make it easier to understand, you can use the StringBuffer class to package this function:

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 note in this code is the strings attribute, which is intended to be a private attribute. It has only two methods, append () and toString. The append () method has a parameter that attaches this parameter to the string array. The toString () method calls the join method of the array and returns the truly connected string. Use the following code to connect a group of strings with the StringBuffer object:

The Code is as follows:

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

Based on the above implementation, we will compare the running time, that is, using "+" to connect strings one by one with our encapsulated tools. Use the following code to test the performance of the StringBuffer object and the Traditional string connection method. Enter the code on the chrome console and run it:

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 on the string connection. The first uses the plus sign and the second uses the StringBuffer class. Each operation connects 10000 strings. The date values d1 and d2 are used to determine the time required to complete the operation. Note that when creating a Date object, if there is no parameter, the current Date and time are assigned to the object. To calculate the duration of the connection operation, subtract the millisecond representation of the date (the return value of the getTime () method. This is a common measure of JavaScript performance. The test results help you compare the efficiency difference between using the StringBuffer class and using the plus sign.

The running result of the preceding example is as follows:

So some people may say that a concat () method is not encapsulated in the String object of JavaScript. We will also use the concat () method below to do the same thing, enter the following code in cancel:

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 the time consumed for 10000 character seek connection is:

It can be concluded that when a certain number of string connections are involved, we encapsulate a StringBuffer object (function) similar to Java in Javascript for operations to improve the performance.