<< JavaScript setInterval Function - JavaScript Timing Events | JavaScript: null vs. undefined - The Difference between null and undefined >>

December 17, 2007 by Blogging Developer

Doing many string concatenation operations can be a major hit on performance even in Javascipt.

Using + to concatenate string pieces into a huge string is not the correct and the only way. Since string concatenation results in too many intermediate strings and concatenation operations, it performs poorly.

A better approach for string concatenation is using Array.join(), which joins all array elements into one string:

var tmp = [];
for (/* each piece */)
{
tmp.push(piece);
}
str = tmp.join('');
return str;

This method doesn't suffer from the intermediate strings, and executes faster with high number of concatenation operations.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 5.0 by 4 people

Currently 5/5 Stars.
1
2
3
4
5

Tag : javascript, array.join, string concatenation

Categories : JavaScript | Tips

Actions : E-mail | Permalink | Comments(10) | Comment RSS

JavaScript substring vs. substr with Examples - The Difference Between JavaScript String Extraction Functions

When you write JavaScript, you need to know string manipulation functions. There is a slight difference between JavaScript substring() and JavaScript substr() which are both used to extract characters from strings.

Get Querystring with JavaScript - Parse/Get QueryString with Client-Side JavaScript

Nearly all server-side programming languages have built-in functions to retrieve querystring values of a URL. In web browsers you can access the querystring with client-side JavaScript, but there is no standard way to parse out the name/value pairs. So here is a function to return a parameter you sp...

.NET Style String Formatting with jQuery - Javascript Function to Support Token Replacement within a String

String concatenation and formatting are common aspects of almost every development effort. However, the combination of single and double quotes, along with escape characters, text, and plus signs (+) can be a bit overwhelming and difficult to remember. The .NET Framework provides a much cleaner appr...

Comments

May 8. 2008 06:30

That is definitely true for Internet Explorer, but in Firefox it is actually faster to use the + to concatenate a bunch of strings than it is to put all the pieces in a temporary array and use the array.join method. In IE the difference is huge though, so it may even be worthwhile to do a browser check before deciding which method to use.

Nicholas Hoza | Reply

July 8. 2008 18:06

What about concat() method (in String class) ?

bigkif | Reply

July 9. 2008 12:10

I don't see why my comment has been deleted :p ... Please tell me what is wrong in my comment (maybe my english ?) instead of deleting it without warning.

My question was : what about using concat() on String class ? This should be the best way to do this...

bigkif | Reply

July 11. 2008 09:36

Hi bigkif,

Thanks for your comment.
Actually, Array.Join is the fastest way to concatenate strings.

Cheers,
Blogging Developer

Blogging Developer | Reply

September 17. 2009 16:59

Not true, array join will add commas to every joint of arrays, so you will need to remove them again using string manipulation find and replace etc - therefore concat() is better faster and more reliable..

Troy III | Reply

October 6. 2009 16:46

Keep in mind that in my tests (converting a 1MB+ XML into HTML), string concatenation is dramatically faster in IE7, but somewhat slower in Firefox (3.5).

In my case, I used a "StringBuilder" pattern that was browser aware...

Vern B | Reply

October 19. 2009 22:51

@Troy III

use array.join(""). then it will not add commas.

Sid | Reply

October 22. 2009 10:30

Social comments and analytics for this post

This post was mentioned on Twitter by bloggingdev: JavaScript Array.Join vs String Concatenation - Avoid String Concatenation's Major Hit on Performance - http://su.pr/6eVyD7

uberVU - social comments | Reply

October 27. 2009 06:30

PPK did a great benchmark a few years ago about that: http://www.quirksmode.org/dom/innerhtml.html. Of course, it seems a little slower on Firefox with latest versions (FF > 3) but this really depends from your application/test cases and the environment. Firefox was optimized but windows versions are known to have some performances issues. Typically, there are lots of threads on Internet about users complaining latest firefox is slower than the previous. Every time it depends from the OS (Vista - XP XX), the user's hardware, the websites, etc... If you are manually using concatenation, it means you're dealing with large data. So you should really considering a bunch of cross-platform tests before adding any browser sniffs. Most of the time I did it, it really doesn't worth. Of course, it depends from the situation. This thread deals clearly with MAJOR hit performance. So from a general point of view and simple cases, please avoid confusing the developers with browser sniffs, or provide and rely to technical articles and technical details about your cases please. If you start playing with "+ is faster on Firefox than IE", for example the limit size of string variables in javascript are not the same for every version of FF. And I start trolling Cheers and take care.