Javascript string connection Performance

I recently read "Advanced guide for high-performance website construction", Chapter 7 is "Writing efficient JavaScript", and the author is Nicholas C. zakas (also author of JavaScript advanced programming) describes the optimization of string connections.

String connection is always one of the operations with the lowest performance in Javascript. Generally, string connection is implemented by using the addition operator (+). For example

var text="hello";
text+=" ";
text+="world!";

Early browsers did not optimize this operation. Because the string is immutable, this means that you need to create an intermediate string to store the connection results. Refer to JavaScript advanced programming, which involves the following steps:

1. Create a string that stores "hello.
2. Create a string that stores "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.

Frequent string creation and destruction in the background can lead to poor performance of string connection.

Fortunately, most browsers have optimized string connections. The first browser to be optimized is Firefox. From version 1.0, it is actually slower to use array technology in all cases than to use addition. Other browsers have also optimized string connections. Safari, opera, chrome, and Internet assumer8 both use addition operators to deliver better performance. (PS: versions earlier than IE8 were not optimized)

So how can we improve the browser's performance before optimizing the string connection performance? One of the common methods is to use an array object. The method 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("");

}

In this way, no matter how many strings are introduced in the array, the join operation will only occur when the join () method is called. The steps are as follows:

1. Create an array of storage results
2. Copy each string to a proper position in the result.
3. Returns the result of merging arrays into strings.

After testing, using the above method, in Firefox 3.6 and IE 8, the performance is actually better than simply using the addition operator (+) low Efficiency (most mainstream browsers have been optimized as mentioned above). However, in IE 8 earlier versions, this method is used to connect strings, the performance is much higher than the direct addition operator (+), which is about 60% (that is, the time spent is about 1/3 of the original time ), the test code in Javascript advanced programming is used:

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

 
 var buffer=new StringBuffer();
 d1=new Date();
 for(var j=0;j<10000;j++){
     buffer.append("text");
 }
 var result=buffer.toString();
 d2=new Date();
 var d4=d2.getTime()-d1.getTime();

 alert("d3:"+d3+" d4:"+d4);

 

The following are two factors that need to be taken into account when deciding on how to connect a string: (1) number of connected strings (2 ).

• When the string is small (less than 20 characters) and the number of connections is small (less than 1000 characters ), the addition operators used in all browsers can be easily connected within less than 1 millisecond. In this case, there is no reason to consider the method other than the addition operator.

 

• Increase the number or size of connection strings, and the performance will be significantly reduced in IE 7. When the string size increases, the performance difference between the algorithm operators and the Array Technology in Firefox will decrease. When the number of string connections increases, the new differences between the two technologies in Safari will also become smaller. Only when chrome and opera change the size and quantity of connection strings, addition operators maintain significant performance advantages.

 

• Because the performance of each browser is inconsistent, the selection of the technology depends largely on the actual situation and the browser. If you primarily use IE 6 or 7, it is worthwhile to use array technology because it affects most people. (Note: at present, there are many people who use Internet Explorer 6 in China ...) Generally, the performance loss of array technology in other browsers is much smaller than the performance improvement in IE.Weigh the user experience based on the user's browserInstead of viewing a specific situation or browser version. However, in most cases, addition operators are preferred.