Webkit、Chromium与Quantum循环性能差异及JS循环优化选型咨询

针对多款浏览器引擎的基准测试显示，for of和for in循环在Safari、Chrome、Firefox中的性能表现存在差异。要确定选哪种循环优化性能，可以从这几个维度入手：

• 匹配使用场景是前提

  • for in的设计初衷是遍历对象的可枚举属性（包括原型链上的属性），如果你的需求是遍历对象的键名，它是合适的选择，但用它遍历数组容易出现问题——比如会遍历到数组的自定义属性或原型链属性，而且在数组遍历场景下，它的性能普遍不如专门针对可迭代对象的循环。
  • for of专门用于遍历数组、字符串、Map、Set这类可迭代对象的元素，语法简洁，还支持break、continue控制流程，在数组等场景的遍历中，多数现代浏览器里性能表现更稳定。

• 结合目标用户的浏览器做针对性测试
  不同浏览器引擎对循环的优化逻辑不同，你可以用简单的测试工具快速验证：

  • 在实际业务代码中，用console.time('loop-test')和console.timeEnd('loop-test')包裹循环代码，对比两种循环的执行耗时。
  • 如果你的用户群体集中在某款浏览器，重点测试该环境下的性能表现——比如在处理十万级以上的数组遍历场景，部分浏览器里for of的速度会远快于for in；但如果是遍历复杂对象的属性，for in是更直接的方案，此时性能差异如果不明显，优先选符合场景的写法。

• 性能优化要让位于代码的正确性与可读性
  除非循环操作已经成为应用的性能瓶颈（比如处理超大量数据、高频执行的循环），否则不要为了微小的性能差异强行替换循环。优先选择更易读、更符合业务逻辑的写法，能减少后续的维护成本。

内容的提问来源于stack exchange，提问作者Alex K