Javascript简单for循环和for...of性能比较

Question

我看到自从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次）用于游戏。

你有线索吗？

- TOPKAT

---

你也可以使用以下变量来完全涵盖性能指标 var i; for (i= 0; i< 5; i++) { } - Mark Schultheiss

问题在于脚本的性能取决于解释器，即浏览器和平台。 - Swift - Friday Pie

这是非常容易检查的事情，你在询问之前尝试过性能测试吗？ - Ian

我自己并没有这个问题，但我认为这是一个很好的社区问题，因为我在这个主题上没有看到任何内容...(我本可以通过测试回答自己的问题，但我想给其他人留下空间和讨论 :) ) - TOPKAT

for ... of 循环语句的速度同样快，而且更易读。 - Bergi

Answer 1

根据这项测试，第一种方式（标准的for循环）的性能表现更好。

- Eren Tantekin

---

当前Chrome的for-of循环速度比较慢，慢了4%。 - Swift - Friday Pie

@Swift 你说得对。我用更好的测试替换了它。 - Eren Tantekin

@SébastienGarcia-Roméo 已修复。 - Eren Tantekin

Answer 2

新的语言功能通常一开始表现不佳，因为它们还没有得到充分的优化关注。随着越来越多的人使用它们，它们就会更容易受到关注。因此，总的来说，使用提供更好、更清晰代码的语言，除非您有一个极端情况需要优化性能。

- spanky

---

当关键时刻到来，你必须使用真实世界的数据在特定目标平台上对你的代码进行基准测试，而不能依赖于通用的过早优化规则。 - Bergi

非常正确，@Bergi。 - spanky

现在引起了注意 :-) - Bergi

Answer 3

一般来说，使用for..of循环一个数组会比for(;;)慢。因为它涉及到迭代器/生成器，这就需要一些额外的开销，而不是增加一个变量并将其与其他值进行比较。

但是，有一个重要的但是：

1. 不要过早地优化代码。编写代码，检查实际瓶颈所在，并开始优化它们。 2. 由于代码优化，微基准测试是无用的。它们测试的是测试本身的性能；而不是你试图进行基准测试的技术。当应用于实际生产代码时，性能可能会以任意方向发生多个数量级的变化。这意味着每个单独的情况都可能不同，在某个地方，for(;;)循环可能更快，在另一个地方，for..of可能更适合。

在AS3中，我学到了函数调用很耗费资源，优化代码的关键在于内联。在JS中，我经常看到Array#forEach比手动循环更快，因为JS可以对数组执行的函数进行优化，并且可以确定它可以摆脱所有安全功能（必须在后台执行），因为此代码不会使用稀疏数组或以某种方式访问该数组上的未定义键。

总结:

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

在JS中，内部优化器是真正快速代码的关键。而不是你应用于代码的微小优化。

- Thomas