JavaScript String Concatenation

Having just read this article about JavaScript performance issues, I decided to try my own little experiment to see whether I got the same results. Unfortunately, I did not.

The article advocates using the join() method on a JavaScript array of strings over using plain old += as a way to speed up string concatenation operations.

The suthor says that his technique yields a 2484%(!) increase in speed in IE and that Firefox executes both methods in roughly the same amount of time. As a Dashboard widget developer, I of course went straight to Safari and Dashboard to try this out. Now, it may be because I’m running the beta of Safari 3 (though in general I’ve found it to be very fast), but in my limited testing, Safari actually performed about 50% worse using the Array.join method method. What was really surprising, though, was that in a Dashboard widget, the Array.join method performed 3 times worse than plain old string concatenation. What’s up with that?

Specifically, running the function below (on my 2.0GHz Core 2 duo MacBook with 2GB of RAM), the times I saw were as follows (averages are over 5 test runs):

Here’s the function:

function runTest() {
  var iters = 100000;
  var timer = {
    start: undefined,
    end: undefined
  };
  timer.start = (new Date()).getTime();
  var str = '';
  for (var i = 0; i < iters; ++i) {
    str += 'Rastafarian ';
  }
  timer.end = (new Date()).getTime();
  document.getElementById('plusequals').value = (timer.end - timer.start);
  timer.start = (new Date()).getTime();
  var buf = [];
  for (var i = 0; i < iters; ++i) {
    buf[i] = 'Rastafarian ';
  }
  var str = buf.join('');
  timer.end = (new Date()).getTime();
  document.getElementById('join').value = (timer.end - timer.start);
}

I would be very interested to see if others get similar results. Post your results (including machine specs & browser version) in the comments. Thanks!

+=
join()

Comments

So…What do you think?

andrew.hedges.name / experiments / JavaScript String Concatenation
Need web development help? Let's talk.

Copyright © 2007. All rights reserved.