Testing string concatenation vs. array join performance in JavaScript

Append String vs Join Array Test Results

Some time ago in an “Optimize jQuery/JavaScript” type of article I read that array joins are faster than string concatenations. It seems that this is not true! Although I didn’t just believe the article blindly. I ran a few quick tests and indeed seemed to get results that supported that conclusion. This however, was a while back, it’s possible I screwed up the tests, or maybe browsers started doing things differently.

I’ve already verified, more recently, that this is not the case but I wanted to setup another test using the jsPerf website that allows one to create public tests that aggregate results from all the testers. They also show the results in a nice chart that gives me a big picture view of the test results. In any case, I created a test with 4 cases to see what kind of an advantage string append has over array join. As  well as compare different ways to append strings. The test is available at http://jsperf.com/append-string-vs-join-array

IE 9 is of course the slowest… no surprises there

It turns out that string concatenation is so much faster than array join that you can’t even see the results in the chart because the bars for the two cases of array join are so much smaller. Besides the yet another confirmation of what I already knew, I did find the results interesting in another way. Chrome and Safari browsers, both of which are based on the WebKit engine, do a “one-line” append significantly faster than “multi-line” one (check the test to see what I mean). Firefox on the other hand does multi-line a bit faster. Internet Explorer 9 is of course the slowest in general, no surprises there (almost).

Here’s what is surprising, Chrome is the slowest desktop browser in the multi-line append, even slower than IE9. Of course this is just based on tests done on my one computer with my browsers. Perhaps if more folks run this test the results will change. I also found it interesting that IE9 runs the two string tests at exactly identical speed.

By the way, while it’s certainly not “the proper” way to evaluate things, but I do feel that indeed a one line append should be faster than multi-line, if only because you’re “looking up” the string variable again on each new line, but only slightly, similar to the results the Opera test is showing. Not sure why both Firefox and Fennec (which is just mobile Firefox) are managing the multi-line concatenation faster. However, I can’t help but think that Safari and Chrome are maybe “cheating” in some way to get the one line append so much faster. Indeed, perhaps the reason why Chrome’s multi-line append is so slow that even IE9 beats it, is because that’s the price for “cheating”.

In any case, I’ll definitely be using string concatenation from now on since it’s significantly faster than array join.

Be the first to comment on this post

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>