异常缓慢的 Javascript 循环

Question

这在某种程度上是我的previous question 的后续。

我创建了a jsPerf，它比较了获取 RGB 像素值的一维数组的多种方法

var rgb = [R, G, B, R, G, B...]

并将这些转换为 HTML5 画布的 RGBA 值（其中 alpha 通道始终为 255，完全不透明）。

var rgba = [R, G, B, 255, R, G, B, 255...]

在我的测试中，我发现我测试的一个名为“For Loop”的循环比其他循环慢得多。在其他循环完成操作每秒数亿次的情况下，它以每秒高达 86 次的速度完成。该循环可以在上面的 jsPerf 链接中找到，但这里有一些带有“For Loop”和“4*unrolled，skip alpha”的代码，这是测试中更快的循环之一。

//Setup for each test
function newFilledArray(length, val) {
    var array = Array(length);
    for (var i = 0; i < length; i++) {
        array[i] = val;
    }
    return array;
}

var w = 160;  //width
var h = 144;  //height

var n = 4 * w * h; //number of length of RGBA arrays
var s = 0, d = 0;  //s is the source array index, d is the destination array index

var rgba_filled = newFilledArray(w*h*4, 255);  //an RGBA array to be written to a canvas, prefilled with 255's (so writing to the alpha channel can be skipped
var rgb = newFilledArray(w*h*3, 128);  //our source RGB array (from an emulator's internal framebuffer)

//4*unrolled, skip alpha - loop completes (exits) 185,693,068 times per second
while (d < n) {
    rgba_filled[d++] = rgb[s++];
    rgba_filled[d++] = rgb[s++];
    rgba_filled[d++] = rgb[s++];
    d++;
}

//For Loop - loop completes (exits) 85.87 times per second
for (var d = 0; d < n; ++d) {
    rgba_filled[d++] = rgb[s++];
    rgba_filled[d++] = rgb[s++];
    rgba_filled[d++] = rgb[s++];
}

它怎么会在语法上如此相似，但在性能方面却相去甚远？

Answer 1

只有for 循环这么慢的原因是因为它是唯一正确的测试用例；所有其他测试用例从不重置，其中包括d 的值，所以第一次迭代是正常的，其余的显然超级快:)

jsperf 给出了更好的结果，其中 for 循环仅比最快的结果稍慢。

更新

正如bfavaretto 建议的那样，您还应该重置s 和您正在构建的目标数组以获得更一致的结果。他的结果可以在here找到。