javascript - 测量循环的哪一部分是慢的？

Question

我正在像这样遍历一个包含几千个项目的数据集。

    users.forEach(function(user){
        //List ALLTHETHINGS!
        listAllEverything(user)
        //Add gropings
        user.groupings = groupings.filter(function(grouping){
            return grouping.conditional(user)
        })
        //Add conversions to user, one per user.
        user.conversions = {}
        //for each conversionList
        conversionLists.forEach(function(conversionList){
            user.conversions[conversionList.name] = [];
            //for each conversion
            for (var i = conversionList.conversions.length - 1; i >= 0; i--) {
                var conversion = conversionList.conversions[i]
                //test against each users apilog
                var converted = user.apilog.some(function(event){
                    return conversion.conditional(event);
                })

                if (converted){
                    //Lägg till konverteringen och alla konverteringar som kommer innan.
                    for (var i = i; i >= 0; i--){
                        user.conversions[conversionList.name].push(conversionList.conversions[i])
                    }
                    break;
                }
            };
        })
    })

我知道这不是最优化的代码，我对如何改进它有一些想法。但是我对这类问题还很陌生，所以我不确定应该如何确定优先级。我知道 console.time，它很有用，但我想使用一些工具(我通常使用 chrome)或一些调试方法来混合在 forEach 循环的每个部分花费的时间。最好是不会对性能产生太大影响的东西。

Answer 1

由于您使用的是 Chrome，因此您应该检查浏览器 DevTools 中的时间轴选项卡 - 只需在运行循环之前点击录制按钮，并在循环完成后停止它。您会看到刚刚发生的所有事情的详分割解，并且您最感兴趣的是黄色条 - 它们显示 JavaScript 操作。

请查看此 video presentation by Paul Irish about Performance Tooling

如您所知，在 Chrome 或 Firefox 中，您只需使用 console.time(和 console.timeEnd)包装一段代码，它将测量特定操作的速度并将其打印在控制台中。

例如:要测量执行整个循环所花费的时间，请使用:

console.time('For loop benchmark');
for(i=0; i<1000; i++) {
// do some operations here
}
console.timeEnd('For loop benchmark');

但是，如果你想测量每次迭代，你可以参数化循环内日志的名称，这样你就可以按照你想要的方式命名每个特定操作:

for(i=0; i<1000; i++)
    var consoleTimeName = 'Measuring iteration no '+i+' which is doing this and that...';
    console.time(consoleTimeName);
    // do some operations here
    console.timeEnd(consoleTimeName);
}

使用它，您可以亲眼看到与 jQuery 的 $.each 循环相比，简单的 for 循环要快多少。

您可以在 developer.mozilla.org 上找到更多相关信息和 developer.chrome.com .请注意，这是一个标准化的跨浏览器兼容功能，您不应该在生产网站上使用它，因为某些浏览器(如 IE)在看到它时可能会向您抛出错误。