Performance of javascript string array concatenation

Traditionally, string connection has always been one of the operations with the lowest performance in Js.

 
VaRText="Hello";
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. Frequent background creation and destruction of string-based export performance is exceptionally low.

After this is found, developers use array objects for optimization.

 VaR  Buffer  =  [], I  = 0  ;
Buffer [I  ++  ]  =  "  Hello  "  ;  //  Adding Elements Using the corresponding index value is faster than the push Method  
  Buffer [I  ++  ]  =  "  World! "  ;
  VaR  Text  =  Buffer. Join (  ""  ); 

In earlier browsers, no intermediate string was created or destroyed. In the case of a large number of string connections, this technology has been proven to be much faster than the addition method.

Today, the browser's string optimization has changed the string connection situation. Safari, opera, chrome, Firefox, and IE8 both use addition operators to deliver better performance. However, versions earlier than IE8 are not optimized, so the array method is still valid. This does not mean that browser detection is required when strings are connected. When deciding how to connect, consider the size and quantity of strings.

When the string is relatively small (less than 20 characters) and the number of connections is small (less than 1000), all browsers can easily complete the connection in less than 1 millisecond using the addition operator. When you increase the number of strings or increase the size, the performance in IE7 will be significantly reduced. When the string size increases, the performance difference between the plus operators and the number composition techniques in Firefox will become smaller. When the number of strings increases, the performance difference between the algorithm operators and the number composition skills in Safari will decrease. Changing the number of strings or increasing the size of strings, the algorithm operators in chrome and opera have always maintained a leading edge.

Therefore, because the performance of different browsers is inconsistent, the selection of technology depends on the actual situation and the browser.

In most cases, the addition operator is the first choice. If you mainly use IE6 or 7, and the string size is large or a large number, the array technology is worth it.

In general, if it is a semantic string, array should not be used, such

 
'Hello, my name is' +Name;
 

If the string is "repeated in similar cases", we recommend that you use array, such

 VaR  Array  =  [];
  For  (I  =     0  ; I <  Length; I  ++  ){
Array [I]  =     '  <Li>  '     +  List [I]  +     '  </Li  '  > ;
}
Document. getelementbyid (  '  Somewhere  '  ). Innerhtml  =  Array. Join (  '  \ N  '  );