文字列の結合方法による速度差

文字列の結合のさせ方によって速度が結構違う

多分これ常識なのかもしれませんが、測ってみてはじめてその速度差がわかったのでメモっときます。

下記コードにて計測

var cnt = 100000;
var moji = '';
console.time("Case1");
for (var i = cnt - 1; i >= 0; i--) {
    moji = '';
    moji += 'もじもじ';
    moji += 'もじもじ';
    moji += 'もじもじ';
    moji += 'もじもじ';
    moji += 'もじもじ';
};
console.timeEnd("Case1");

console.time("Case2");
for (var i = cnt - 1; i >= 0; i--) {
    moji = ''+
        'もじもじ'+
        'もじもじ'+
        'もじもじ'+
        'もじもじ'+
        'もじもじ';
};
console.timeEnd("Case2");

console.time("Case3");
for (var i = cnt - 1; i >= 0; i--) {
    moji = [
        ''
        ,'もじもじ'
        ,'もじもじ'
        ,'もじもじ'
        ,'もじもじ'
        ,'もじもじ'
    ].join('');
};
console.timeEnd("Case3");

Case1 : わりと見かける形。都度都度文字列を結合。メモリの確保と参照変更と破棄を繰り返してる。
Case2 : 一発で文字列結合しちゃう。これ内部的にどういう動きになってんだろ。
Case3 : 今まで自分がやってた方法。

計測結果

何回か施行して平均っぽい数字を結果として扱っています。

Google Chrome

ケース	処理時間
Case1	16.000ms
Case2	5.000ms
Case3	154.000ms

Case3（配列をjoin）おそっ！！Case2のおよそ30倍の処理速度がかかってる。これはひどい。

Firefox

ケース	処理時間
Case1	8.81ms
Case2	1.45ms
Case3	44.79ms

処理速度の順位は変わらず。でもChromeより文字列結合速度が早いんだね。

結論　＋演算子で一気につなぐのが良さそう

Case3はド派手に遅いのでもう論外として、
Case1とCase2では3～8倍程度の実行速度差が出た。都度都度変数に追加するのはやっぱり無駄が多いみたい。

join('')はやばい

いままで、コードの見た目的に気に入っていたという理由から
文字列の入った配列をjoin('')して長い文字列を生成してたんですが、
すごいダメ感のある結果であることが判明したので、もしやってる人がいたらやめたほうがいいです。