Posted at

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

More than 5 years have passed since last update.


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

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


下記コードにて計測

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('')して長い文字列を生成してたんですが、

すごいダメ感のある結果であることが判明したので、もしやってる人がいたらやめたほうがいいです。