Help us understand the problem. What is going on with this article?

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

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('')して長い文字列を生成してたんですが、
すごいダメ感のある結果であることが判明したので、もしやってる人がいたらやめたほうがいいです。

ampersand
クソアプリの投稿ばっかりしてるのでContributeの数に惑わされないようにしてください。僕の技術力はしょっぱいです。
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした