High-performance String Concatenation in JavaScript

Concatenation, or joining strings, is an important facility within any programming language. It's especially vital within web applications, since strings are regularly used to generate HTML output. Several languages offer fast string-handling classes such as StringBuilder in .NET and StringBuffer/StringBuilder in Java.

There are a number of ways to concatenate strings in JavaScript:

view plainprint?

1. str = "a" + "b";  
2. str += "c";  
3. str = str.concat("d", "e");  

 str = "a" + "b"; str += "c"; str = str.concat("d", "e"); 

You can also join an array of strings:

view plainprint?

1. str = ["a", "b", "c", "d", "e"].join("");  

 str = ["a", "b", "c", "d", "e"].join(""); 

If you're only joining a few strings, you should use whichever method is most practical. Performance gains or losses will be negligible in all browsers.

Concatenating Many Strings

Consider the following functionally identical examples. The first uses the string concatenation operator:

view plainprint?

1. // standard string append  
2. var str = "";  
3. for (var i = 30000; i > 0; i--) {  
4.     str += "String concatenation. ";  
5. }  

 // standard string append var str = ""; for (var i = 30000; i > 0; i--) { 	str += "String concatenation. "; } 

The second uses an array join:

view plainprint?

1. // array join  
2. var str = "", sArr = [];  
3. for (var i = 30000; i > 0; i--) {  
4.     sArr[i] = "String concatenation. ";  
5. }  
6. str = sArr.join("");  

 // array join var str = "", sArr = []; for (var i = 30000; i > 0; i--) { 	sArr[i] = "String concatenation. "; } str = sArr.join(""); 

Which will execute the fastest?

Some developers will assume the concatenation operator is faster because it uses less code and doesn't require an array that doubles memory requirements. For others, conventional wisdom dictates that array joins are faster—it's more memory efficient within the JavaScript interpreter.

The truth is rather more complex. In all the most recent browsers, either method is fast and will complete within 80ms on a mid-range PC. Here are the results from my own completely unscientific benchmark tests:

• Chrome 6.0: standard string appends are usually quicker than array joins, but both complete in less than 10ms.
• Opera 10.6: again, standard appends are quicker, but the difference is marginal—often 15ms compared to 17ms for an array join.
• Firefox 3.6: the browser normally takes around 30ms for either method. Array joins usually have the edge, but only by a few milliseconds.
• IE 8.0: a standard append requires 30ms, whereas an array join is more than double—typically 70ms.
• Safari 5.0.1: bizarrely, a standard append takes no more than 5ms but an array join is more than ten times slower at 55ms.

The latest JavaScript engines are optimized for string concatenation operators. Array joins remain fast, but are without a performance gain.

IE7 is the world's third-most-used browser with a 14% market share. IE6 accounts for another 8%. There's no need to read further if you've dropped support for these aging applications.

Still here? This is the shocker: IE7 and below use a concatenation handler that repeatedly copies strings and causes an exponential increase in time and memory usage. The code using the concatenation operator takes around 2.5 minutes (150,000ms) to execute, and the browser remains unresponsive throughout. By comparison, the array join completes in under 200ms—it's more than 800 times faster.

If you're supporting IE7, array joins remain the best method for concatenating a large number of strings.