The Performance of JavaScript String Concat

When we code JavaScript, sometimes we need to combine strings together. Short and several strings are just fine, but when it comes to long and plenty of strings like HTML strings… things are quite different.

Methods of String Concat

Just use ‘+=’ to do a concat.

var strA = '...', // large string
    strB = '...', // also large string
    ...
    strN = '...'; // dozens of large strings
var result = ''; // final result string
result += strA;
result += strB;
...
result += strN;

Use push() and join() of array.

var strA = '...', // large string
    strB = '...', // also large string
    ...
    strN = '...'; // dozens of large strings
var arr = []; // temporary array of strings
arr.push(strA);
arr.push(strB);
...
arr.push(strN);
var result = arr.join(); // get final result string

Use array index and join() of array.

var strA = '...', // large string
    strB = '...', // also large string
    ...
    strN = '...'; // dozens of large strings
var arr = []; // temporary array of strings
arr[0] = strA;
arr[1] = strB;
...
arr[n] = strN;
var result = arr.join(); // get final result string

As you can see, the three major methods are both easy to code. But how about their performance? Let’s check it out.

Performance of Methods

See, in NodeJs, we may use process.hrtime() to get the time duration of the whole process. If we run the method as many as possible, the duration we get will be more accurate. So, let’s try it out.

function method1(times) {
    var tick = process.hrtime();
    var str = '';
    for (var i = 0; i < times; i++) {
        str += StringA;
    }
    var ntick = process.hrtime(tick);
    return ntick[0] * 1000 + ntick[1] / 10e6;
}
function method2(times) {
    var tick = process.hrtime();
    var str = [];
    for (var i = 0; i < times; i++) {
        str.push(StringA);
    }
    str.join('');
    var ntick = process.hrtime(tick);
    return ntick[0] * 1000 + ntick[1] / 10e6;
}
function method3(times) {
    var tick = process.hrtime();
    var str = [];
    for (var i = 0; i < times; i++) {
        str[i] = StringA;
    }
    str.join('');
    var ntick = process.hrtime(tick);
    return ntick[0] * 1000 + ntick[1] / 10e6;
}
function averageTest(method, name, N = 100, n = 1000000) {
    var total = 0;
    for (var i = 0; i < N; i++) {
        total += method(n);
    }
    console.log(name, 'duration:', total / N, 'ms', 'in ' + N + ' tests with ' + n + ' concat loops');
}
var methods = [{
    method: method1,
    name: '+='
}, {
    method: method2,
    name: 'push & join'
}, {
    method: method3,
    name: '[] & join'
}];
methods.map(ele => {
    averageTest(ele.method, ele.name);
});
var StringA = 'devchache_from_github;devchache_with_ziyuan';

And the output is:

# Run string concat in 100 tests with 1000000 concat loops
+= duration: 15.8343 ms
push & join duration: 7.8763 ms
[] & join duration: 8.1284 ms

Test result

Several tests of the three methods

*: This test is NOT suggested! It took my Mac almost an hour to get the first result line of Method1. DO NOT try this unless you want to waste time.

From the table, we can find that both the loop time and single string length don’t affect execution duration. The only factor is concat times.

• When there are no more than 100 thousand concat, a direct ‘+=’ operation takes less time.
• When there are more than 1 million concat, use join() is definitely better, while use array index to extend elements is even better.

What’s more?

Tests to find out the threshold

So, within 413,085 times of concat, using ‘+=’ has the same performance as using join() does.

NOTE the duration of execution depends on your machine and a lot of other factors. These data are just examples and you should not regard them as a standard.

Conclusion

According to the test, we find it more fast to use ‘+=’ when operates not so many strings. And it could be faster to use join() of array when you deal with a lot of data, especially extend a string array with index. But we can find the length of each atomic string does not affect the operation. From the data, it is obvious that in real development, there is not so many chance to deal with over 413,085 atomic strings. While the duration is just a few milliseconds, it is definitely okay to use any method when perform string concats.

And if you want find out why the speeds of these methods are different from each other, you can read the native code of JavaScript engine such as Google V8.

Thanks for reading.