Javascript 简单的 for 循环与 for...of 性能答案

【问题标题】：Javascript simple for loop versus for...of performancesJavascript 简单的 for 循环与 for...of 性能
【发布时间】：2018-01-20 21:51:14
【问题描述】：

我已经看到，从 ECMA 6 开始，我们可以使用 for...of 代替传统的 for 循环：

for( let i = 0 ; i < arr.length ; i++ ) {
    var elm = arr[i];
    // do stuff
}

VS

for( let elm of arr ) {
    // do stuff
}

你有没有看到第二个更易读、更简单、更易于维护！

我只是想知道第二种语法的性能如何，因为我需要在游戏的渲染循环（每秒 60 次）中大量使用它。

你有线索吗？

【问题讨论】：

您还可以包含此变体以完全包含性能指标var i; for (i= 0; i< 5; i++) { }
问题在于脚本的性能取决于解释器，即取决于浏览器和平台。
这很容易检查，您在询问之前是否尝试过性能测试？
我没有，但我认为这对社区来说是一个很好的问题，因为我没有看到关于这个主题的任何内容....（我本可以通过测试回答我自己的问题，但想腾出空间供其他人和讨论:)）
for … of is just as fast，而且可读性更强

标签： javascript for-loop ecmascript-6 for-of-loop

【解决方案1】：

第一个（标准 for 循环）的性能要好得多 according to this test。

【讨论】：

对于当前的 Chrome for-of 慢 4%
@Swift 你是对的。我用更好的测试代替了它。
@SébastienGarcia-Roméo 已修复。

【解决方案2】：

一般来说for..of会比for(;;)慢，循环一个Array。因为它处理迭代器/生成器，与递增变量并将其与其他值进行比较相比，这涉及一些开销。

BUT，如您所见，这是一个很大的但是

不要过早地优化代码。编写代码，检查实际瓶颈在哪里，然后开始优化这些。
由于代码优化，微基准测试毫无用处。他们测试实际测试本身的性能；不是您尝试进行基准测试的技术。在您的实际生产代码中应用这些技术时，性能可能会在任何方向上发生多个数量级的变化。这实际上意味着每一次发生。在某个地方，for(;;) 循环可能更快，而在其他地方，for..of 可能会更好。

在我学习 AS3 期间，我了解到函数调用很昂贵，优化代码的关键是内联。在 JS 中，我经常看到 Array#forEach 超出手动循环，当 JS 可以优化在 Array 上执行的函数的 sh*t 时 + 可以确定它可以摆脱所有安全功能（必须在幕后执行） )，因为不会使用稀疏数组调用此代码，也不会以其他方式访问该数组上未定义的键。

总结：

除非您在 实际上下文 中调试您的 实际代码，否则您不知道如何实际优化它；你只能估计或猜测。

在 JS 中，内部优化器是真正快速编写代码的关键。不是您对代码应用的一些微优化。

【讨论】：

【解决方案3】：

较新的语言功能通常一开始表现不佳，因为它们没有得到足够的优化关注。

使用它们的人越多，它们就越有可能受到关注，因此总体而言，使用提供更好、更清晰代码的任何一种，除非您遇到性能至关重要的极端情况。

【讨论】：

...当它至关重要时，您必须使用真实数据在特定目标平台上对您的特定代码进行基准测试，而不是依赖通用的过早优化规则。
非常真实@Bergi。
It has gotten the attention now :-)