JavaScript高速化への道 - ループの処理を高速化

ループの処理を高速化

• ループ処理を選ぶ
• 処理の実行時間を把握する

ループ処理を選ぶ

• while
• for
• for in

不規則な配列を処理する場合

var arr = [];
arr[0] = 1;
arr[500] = 1;
arr[1000] = 1;
arr[5000] = 1;
arr[100000] = 1;
arr[500000] = 1;

while

console.time("while");
var sum = 0;
var i = 0;
var length = arr.length;
while(i < length) {
    if (!(i in arr)) {
        i++;
        continue;
    }

    sum += arr[i];
    i++;
}
console.timeEnd("while");

結果

• Chrome: 107.318ms
• FireFox: 43.08ms
• Safari: 41.323ms

for

console.time("for");
var sum = 0;
var length = arr.length;
for(var i = 0; i < length; i++) {
    if (!(i in arr)) {
        continue;
    }

    sum += arr[i];
}
console.timeEnd("for");

結果

• Chrome: 101.069ms
• FireFox: 42.45ms
• Safari: 40.033ms

for in

console.time("for in");
var sum = 0;
for(var i in arr) {
    if (!arr.hasOwnProperty(i)) {
        continue;
    }

    sum += arr[i];
}
console.timeEnd("for in");

結果

• Chrome: 0.060ms
• FireFox: 0.39ms
• Safari: 0.053ms

不規則な配列を処理する場合

プレーンなArrayが条件であれば、不規則な配列をループで処理をしたい場合
for inが一番高速に処理をしてくれた。

処理の実行時間を把握する

console.time("while");
while(total < 30) {
    console.time("for in");
    var sum = 0;
    for(var i in arr) {
        if (!arr.hasOwnProperty(i)) {
            continue;
        }

        sum += arr[i];
    }
    console.timeEnd("for in");
    total++;
}
console.timeEnd("while");

結果

• Chrome: for inの平均値: 0.02ms, while: 2.836ms
• FireFox: for inの平均値: 0.2ms, while: 16.81ms
• Safari: for inの平均値: 0.02ms, while: 3.257ms

method単位の実行時間を計測して気付いたのが
ループ処理に複数のmethodをのせると、ループ自体が重くなるので
役割を分担させることで高速化を試みる。

• ループ処理は、ループを完了することに集中する。
• 各methodは非同期で処理する

console.time("while");
while(total < 30) {
    setTimeout(function()
    {
        console.time("for in");
        var sum = 0;
        for(var i in arr) {
            if (!arr.hasOwnProperty(i)) {
                continue;
            }

            sum += arr[i];
        }
        console.timeEnd("for in");
    },0);
    total++;
}
console.timeEnd("while");

結果

• Chrome: for inの平均値: 0.02ms, while: 0.203ms
• FireFox: for inの平均値: 0.2ms, while: 1.41ms
• Safari: for inの平均値: 0.02ms, while: 0.226ms

methodの順番を担保したい場合は別途考慮が必要だけど
速度を上げるだけであればこれもいいかもしれない。