JavaScript：String Concatenation性能下降？ 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()?

Answer 1

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

Answer 2

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.

Answer 3

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>