7

在某种程度上，这是对我之前的问题的跟进。

我创建了一个 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++];
}

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

4

1 回答 1

10

只有for循环如此缓慢的原因是因为它是唯一正确的测试用例；所有其他测试用例都不会重置，除其他外， 的值d，所以第一次迭代是正常的，其余的显然超级快:)

这个jsperf提供了更好的结果，其中 for 循环仅比最快的结果稍慢。

更新

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

于 2013-07-09T03:35:22.083 回答