Javascript For 循环 VS JQuery 每个 : strange result

Question

我已经阅读了关于这个主题的几个问题/文章，并且我在我的解决方案中测试了使用 for 的相同代码块在大多数情况下比 each 快.

然而，我的问题与事实有关，在我的页面中，我有大约 30 个“循环”，使用 each 的起始结果约为 5300ms(平均)，最大值为 5900ms，最小值为4800 毫秒。

在我将它们更改为 for 之后，最终结果出人意料地变慢了，比之前的平均值花费了更多的时间(而且从未低于 4800 毫秒，甚至高于 6000 毫秒)。 ...但是当我将 console.time('Time') console.timeEnd('Time') 放在每个“循环 block ”中时，我得到了预期的结果( FOR 更快)。

使用 for 的全局“时间”怎么可能比使用 each 慢？

能否指出一些可能的原因？

P.S.- 完整的源代码非常庞大，这里重要的部分是唯一的变化是:循环 each 转换为 for .

用于 For 循环的示例

var l = list.length;  
for (var i=0;i<l; i++) {  

}

用于每个循环的示例

$.each(list, function (i, item) {

});

更新 #1

• 使用 console.time('Time') 测量时间console.timeEnd('时间')。对于全局时间，我只使用一个“计数器”。对于多个计数器，我当然使用不同的名称。
• 在所有这些“过程”中，没有 Ajax 请求，因此时间差与此无关。

更新 #2

• 正如@epascarello 所要求的:每个循环的“内部代码”从未改变，这不应该是原因，当我们以相同的方式访问这个对象时更是如此(使用 For 或 Each ) list[i].SomeProperty，恕我直言，时间差异永远不能归咎于内部代码(我认为)。

更新#3

• 有时我使用不同的变量 i、ii、iii 使用级联“循环”。
• 我经常在同一个函数中“重用”变量:

var l = list1.length; ...; l = list2.length;

这同样适用于for 变量i、ii、iii。

更新 #4

我注意到 Chrome 中的一个奇怪行为:以下模式用于重复多次，下降一段时间然后再次上升。

• DrawGUI:6159.000 毫秒再次启动
• DrawGUI:5990.000 毫秒下降
• DrawGUI:5804.000 毫秒下降
• DrawGUI:5416.000 毫秒下降
• DrawGUI:5315.000 毫秒下降
• DrawGUI:5311.000 毫秒下降
• DrawGUI:5325.000 毫秒
• DrawGUI:5248.000 毫秒下降
• DrawGUI:5010.000 毫秒下降
• DrawGUI:4886.000 毫秒下降
• DrawGUI:5645.000 毫秒*UP AGAIN *
• DrawGUI:5247.000 毫秒
• DrawGUI:5446.000 毫秒

在所有这些测试期间，我关闭了所有其他 chrome 选项卡和不必要的应用程序。尽量减少不稳定的 CPU 可用性。

Answer 1

由于您正在对空循环进行基准测试，因此您为 JIT(即时编译器)提供了充足的优化空间。 each 调用可能会被一起删除，因为它没有副作用。但是，for 循环必须运行，因为 i 定义在 包含 for 循环的范围内，而不是在 for 循环内。

(function() {
    for (var i=0; i<10; i++) {}
    console.log(i); // outputs 10
})();

对比

(function() {
    [0,1,2,3,4,5,6,7,8,9].forEach(function(i) {});
    console.log(i); // i is not declared
})();

这也是 JSLint/JSHint 提示 i 被以下代码声明两次的原因:

for (var i=0; i<10; i++) {}
for (var i=0; i<10; i++) {}