Javascript:为什么我的优化循环比更天真的循环慢

Question

如果您喜欢其格式，请链接到 jsperf:https://jsperf.com/test-array-vs-loop-vs-loop-optimized

我正在尝试使用旧的 jsperf 循环与过滤器，并且我尝试通过在大小正确的情况下预分配数组并避免重新计算项目长度来优化循环。问题是它在我的 Chrome 60 上运行得并不快。

代码如下:

var items = [];
var names = ['george', 'nick', 'jack', 'herodotus', 'joanne'];
for (var i = 0; i < 2000; i++) {
    var obj = {
        name: names[i % 5] + '-' + i,
        age: i % 10 + 15
    };
    items.push(obj);
}

function filter_callback(item) {
    return (item.age == '18');
}

function test_filter() {
    var aged_18_filter = items.filter(filter_callback);
}

function test_loop() {
    var aged_18_loop = [];
    for (var i = 0; i < items.length; i++) {
        if (items[i].age == '18') aged_18_loop.push(items[i]);
    }
}

function test_loop_optimized() {
    var length=items.length
    var aged_18_loop = new Array(length);
    for (var i = 0; i < length; i++) {
        if (items[i].age == '18') aged_18_loop[i]=items[i];
    }
}

编辑:正常循环的结果约为 39,281 ops/sec，“优化”循环的结果约为 37,389 ops/sec。在 i7 3610QM 上。

Answer 1

I tried to optimize the loop by preallocating the array if a correct size

但是你失败了。过滤结果通常与输入大小不同。通过不在数组末尾追加(使用 push)并始终分配给索引 i，您甚至可以创建一个稀疏数组。 (鉴于您的样本非常小，至少没有产生太大影响)。

正确的做法可能是

function test_loop_optimized() {
    var length = items.length;
    // let's guess that the result will have about a fifth of the size
    var result = new Array(Math.round(length / 5));
    var i = 0;
    var j = 0;
    while (i < length) {
        var item = items[i++];
        if (item.age == '18')
            result[j++] = item;
    }
    result.length = j; // just in case we guessed too high
    return result;
}

…and avoiding item length recalculation

这是一个微不足道的优化，JS 引擎确实想出自己应用。访问 .length 实际上并不慢。除非有什么奇怪的事情发生，否则你不会从拼写中受益。