JavaScript: String Concatenation slow performance? Array.join('')?

Question

I've read that if I have a for loop, I should not use string concation because it's slow. Such as:

for (i=0;i<10000000;i++) {
    str += 'a';
}

And instead, I should use Array.join(), since it's much faster:

var tmp = [];
for (i=0;i<10000000;i++) {
    tmp.push('a');
}
var str = tmp.join('');

However, I have also read that string concatention is ONLY a problem for Internet Explorer and that browsers such as Safari/Chrome, which use Webkit, actually perform FASTER is using string concatention than Array.join().

I've attempting to find a performance comparison between all major browser of string concatenation vs Array.join() and haven't been able to find one.

As such, what is faster and more efficient JavaScript code? Using string concatenation or Array.join()?

Shouldn't be too difficult to construct a simple test to find out. Add some code to keep track of the time it takes to perform the two operations above and then run it in different browsers. Coincidentally, I was reading this just a little while ago: aymanh.com/…. Take a look at the comments as well. — mmacaulay
– mmacaulay, Commented May 6, 2010 at 14:15
@mmacaulay, that is actually the article that caused my interest. small world (or we simply both read reddit). — NickNick
– NickNick, Commented May 6, 2010 at 14:21

NickNick · Accepted Answer · 2010-05-06 14:45:46Z

3

It appears Array.join() for the most part across browsers is faster.

Current gen Browsers

FF3        array.join is ~2x faster
Safari 3   array.join ~1.5x faster
Opera 9    += ~3x faster
ie6     array.join ~6x faster
ie7     array.join ~4x faster

Next gen browsers

FF3.1      += array.join equal in speed
Chrome     +=  ~1.25x faster
IE8     array.join ~1.6x faster
Webkit     array.join ~2x faster

Test results here: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

edited May 6, 2010 at 14:45

answered May 6, 2010 at 14:31

NickNick

811 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BlueRaja - Danny Pflughoeft Over a year ago

Actual times would be helpful here - if Opera is 50x faster than ie6 at joining strings, then whether joining or concatenating on Opera is faster doesn't really matter, since it probably won't be a bottleneck on that browser.

Pointy · Accepted Answer · 2010-05-06 14:18:43Z

My feeling is that since there's no "nice" way to do a feature check to see whether string concatenation is slow, and because Array.join() is not terrible in non-IE browsers, using the array approach is good because your pages will behave pretty well everywhere and you won't have a mess to maintain (and you can avoid browser sniffing).

Now if you're implementing a framework or a library and not just a feature or two on a site, then more fine tuning might be called for.

Finally, I suggest going back to google and reading some of the results you get from a search for "javascript string concatenation performance." I found several good ones and I only got through half the first SRP. Read the comments on the blog posts too because often you pick up interesting links there.

Xtra Coder · Accepted Answer · 2012-11-30 15:23:54Z

I was curious not only about string concatenation, but about parsing as well. Here are some results regarding array.join, string+=, charAt() and array[].

Short summary

joining array is roughly 2.5-6 times quicker than string+=
array[] is 1.5-3 times quicker than charAt() (and splitting string to array is not an expansive operation)

Raw results

                  Chrome v23    FF 17     IE8
fill array(100k)         43      15       270 ms
join array(100k)         33       5        43 ms
string+=(100k)          223      12       118 ms
charAt(488.89k * 100)   517     462     75467 ms
split(488.89k)           12      34       279 ms
array[](488.89k * 100)  267     323     27343 ms

HTML code to test

<table>
    <col/>
    <col align="right"/>
    <col/>
<script type="text/javascript" >
    function test(what, action) {
        var start = new Date(), end
        document.write("<tr><td>" + what + "</td>")
        action()
        end = new Date()
        document.write("<td>" + (end.getTime() - start.getTime()) + "</td> <td>ms</td></tr>\n")
    }

    var alen = 100000, efAlen, nIter = 100
    var s = ""  // test string for charAt, s[pos]
    var ss = "" // subject ss += "??"
    var as = [] // source for s = as.join("")
    var slen    // slen = s.length
    var a       // a = s.split("")
    var maxSlen = 1000*1000

    test("fill array(" + (alen / 1000) + "k)", function() {
        slen = 0
        for( var i = 0; i < alen; i++ ) {
            var v = "" + i
            slen += v.length
            if( slen < maxSlen )
                efAlen = (i + 1)
            as[i] = v
        }
    })

    test("join array(" + (efAlen / 1000) + "k)", function() {
        s = as.slice(0, efAlen).join("")
        slen = Math.min(s.length, maxSlen)
    })

    test("string+=(" + (efAlen / 1000) + "k)", function() {
        for( var i = 0; i < efAlen; i++ ) {
            ss += as[i]
        }
        if( ss != s )
            document.write("ss.length:" + ss.length + ", s.length:" + s.length)
    })

    test("charAt(" + (slen / 1000) + "k * " + nIter + ")", function() {
        for( var i = 0; i < nIter; i++ ) {
            for( var p = 0; p < slen; p++ ) {
                var c = s.charAt(p)
            }
        }
    })

    test("split(" + (slen / 1000) + "k)", function() {
        a = s.split("")
    })

    test("array[](" + (slen / 1000) + "k * " + nIter + ")", function() {
        for( var i = 0; i < nIter; i++ ) {
            for( var p = 0; p < slen; p++ ) {
                var c = a[p]
            }
        }
    })
</script>
</table>

Collectives™ on Stack Overflow

JavaScript: String Concatenation slow performance? Array.join('')?

3 Answers 3

Current gen Browsers

Next gen browsers

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Current gen Browsers

Next gen browsers

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related