ブラックボックス

プログラミングのノウハウやライフハックをどんどん投稿していきたい

Jul 31, 2015 - 1 minute read - ノウハウ

【JavaScript】$.eachとfor文の処理時間を比較してみた

表題の通り。
どれくらいの差があるのかを比較してみた。

ちなみに使用jQueryのバージョンは1.11.0。

参考: http://www.sitepoint.com/speed-question-jquery-each-vs-loop/

まずはこんな感じでループ用の配列を定義。

var no = [];
    for (var i = 0; i < 10000000; i++) {
        no.push(i);
    }

no変数をループさせ、処理時間を比較してみる。


jQueryの$.each

// 処理開始時間
    var before = +new Date();
    $.each(no, function() {
    });
    // 結果
    var result = +new Date() - before;

for文 その1

// 処理開始時間
    var before = +new Date();
    for (var i = 0; i < no.length; i++) {
    }
    // 結果
    var result = +new Date() - before;

for文 その2 変数初期化をforの前に行う

// 処理開始時間
    var before = +new Date();
    var len = no.length, i = 0;
    for (i; i < len; i++) {
    }
    // 結果
    var result = +new Date() - before;

何度か計測した結果、resultに入った値は下記の通り。

<td>
  結果
</td>
<td>
  1000~1100
</td>
<td>
  10~47
</td>
<td>
  10~12
</td>
処理
$.each
for文 その1
for文 その2

一番最後の、for文の前にあらかじめ変数を定義しておくやり方が安定して速い。