LA.NET [EN]

Sep 23

One of the things you probably need to do is concatenate strings. I guess most of us simply use the + operator for that, right? I’ve seen lots of code which look like this:

var s = "Hello World";
for (var i = 0; i < 100000; i++) {
    s += "something else";
};

If you’re an experience JS developer, you’re probably thinking “oh my god"! what an awful piece of code…”. In case you’re wondering, the problem is that string concatenations are really expensive (because strings are immutable in JavaScript).

Now that you know you’ve got a problem, you can go on and search for solutions in the web. It won’t be long until you find the solution to this kind of problem. It’s really simple: you use arrays, push the strings into it through the push method and then you get the final string by calling the join method:

var s = ["Hello World"];
for (var i = 0; i < 100000; i++) {
    s.push("something else");
};

Ah, and now we can go home an relax because we’ve solver our string concatenation problems…really? hum, probably not…Today I’ve thought about using a simple test based on getTime to see how things work with the latest browsers. Here’s the script I’ve used:

function doIt1(){
    var time = (new Date).getTime();
    var s = "Hello World";
    for (var i = 0; i < 100000; i++) {
        s += "something else";
    };
    var end = (new Date).getTime() - time;
    alert(end);
}

function doIt2() {
    var time = (new Date).getTime();
    var s = ["Hello World"];
    for (var i = 0; i < 100000; i++) {
        s.push("something else");
    };
    var end = (new Date).getTime() - time;
    alert(end);
}

doIt1();
doIt2();

I’m not really an expert in benchmarking (I didn’t really run these lines several times for getting average values; instead, I’ve loaded the page several times in different browsers and annotated the values that were shown frequently for each browser). Here are the results I’ve got from running the previous snippet in several browsers (which might vary, of course):

  doIt1 doIt2
Chrome 3.0 16 5
FF 3 56 17
Opera 10 59 78
IE 8 25 71
Safari 4 40 4

As I said before, my main objective was to test the two techniques for concatenating strings (I’m not really interested in seeing which browser does string concatenation better). one more note of interest: before updating Opera to its latest release, the results were inverted (that is,it was slower to concatenate strings with the + operator than to use the array technique).

I guess that with the latest releases of browsers,it’s no longer safe to assume that the array+push strategy will improve our  string concatenation code. At least, not in IE and Opera.

I’d be interested in seeing if others get the same result as I did (regarding the concatenation speed in IE and Opera). If you do get the same results, then this means that improving string concatenation code might no longer a no brainer…

And that’s it for now. Stay tuned for more on JavaScript.

2 comments so far

  1. Bertrand Le Roy
    9:23 pm - 9-23-2009

    This is apples to oranges unless you include the call to join at the end of the second benchmark in order to get a string as the output.
    The IE team has indeed optimized concatenation to make it perform better than the array joining so this is not a surprise.

  2. luisabreu
    9:58 pm - 9-23-2009

    Yep, you”re right…I”ve missed that line (though I”m almost positive I had it on my original code – need to check it tomorrow). Anyway, I”m assuming that the join method call won”t really make the array strategy any faster, right 😉