Chrome for循环优化

Question

所以我很好奇迭代一个数组会更快,正常的for循环还是forEach所以我在控制台中执行了这个代码:

var arr = [];
arr.length = 10000000;
//arr.fill(1);
for (var i_1 = 0; i_1 < arr.length; i_1++) {
arr[i_1] = 1;
}
//////////////////////////////////
var t = new Date();
var sum = 0;
for (var i = 0; i < arr.length; i++) {
    var a = arr[i];
    if (a & 1) {
        sum += a;
    }
    else {
        sum -= a;
    }
}
console.log(new Date().getTime() - t.getTime());
console.log(sum);

t = new Date();
sum = 0;
arr.forEach(function (value, i, aray) {
    var a = value;
    if (a & 1) {
        sum += a;
    }
    else {
        sum -= a;
    }
});
console.log(new Date().getTime() - t.getTime());
console.log(sum);

现在,Chrome中的结果为for49ms,forEach循环为376ms .哪个好,但Firefox和IE(和Edge)的结果有很大不同.

在其他浏览器中,第一个循环需要大约15秒(是秒),而forEach"仅"大约需要4秒.

我的问题是,有人可以告诉我Chrome的确切原因吗？

我在循环中尝试了各种操作,结果总是支持Chrome一英里.

Answer 1

免责声明：我不知道 Chrome 中的 V8 或 Firefox / Edge 的解释器的具体情况，但有一些非常普遍的见解。由于 V8 将 Javascript 编译为本机代码，让我们看看它可能做什么：

• 非常粗略地：像你这样的变量var i可以建模为一个非常通用的Javascript变量，这样它就可以采用从数字到对象的任何类型的值（建模为指向struct Variable实例的指针），或者编译器可以推断出实际类型（比如int例如，在 C++ 中）从你的 JS 中编译它。后者使用更少的内存、利用缓存、使用更少的间接，并且可能与forC++ 中的循环一样快。V8 大概就是这么做的。
• 上面的内容也适用于您的数组：也许它会编译为int连续存储在内存中的内存高效数组；也许它是一个指向通用对象的指针数组。
• 可以删除临时变量。
• 第二个循环可以通过内联函数调用来优化，也许已经完成，也许没有。

重点是：所有 JS 解释器/编译器都可以潜在地利用这些优化。这取决于很多因素：编译和执行时间之间的权衡、JS 的编写方式等。

V8 似乎优化了很多，Firefox / Edge 在这个例子中可能没有优化。准确地知道为什么需要深入了解解释器/编译器。