如何编写更快的 JavaScript？ [关闭]

Question

我正在编写一个 HTML5 画布可视化。根据 Chrome 开发者工具分析器，90% 的工作是在 (program) 中完成的，我假设 V8 解释器在工作中调用函数和切换上下文等等。

除了逻辑优化（例如，仅重绘已更改的可视化部分）之外，我还能做些什么来优化 JavaScript 的 CPU 使用率？我愿意为性能牺牲一些可读性和可扩展性。有没有因为我的 Google 技能糟糕而遗漏的大清单？我有一些想法，但我不确定它们是否值得：

• 限制函数调用
• 尽可能使用数组而不是对象和属性
• 数学运算结果尽可能使用变量
• 缓存Math.PI / 180等常用数学运算
• 使用sin 和cos 近似函数代替Math.sin() 和Math.cos()
• 在传递数据而不是创建新对象时重用对象
• 将Math.abs() 替换为~~
• 学习jsperf.com直到我的眼睛流血
• 在我的 JavaScript 上使用预处理器来执行上述一些操作

关闭后更新：以下是我想问的问题的答案。我想用以下内容来回答我自己的问题：

• Efficient JavaScript - Dev.Opera
• JavaScript Call Performance – Just Inline It
• “I want to optimize my JS application on V8” checklist

Answer 1

衡量您的表现，找到瓶颈，然后应用适当的技术来解决您的特定瓶颈。过早的优化是徒劳的，应该不惜一切代价避免。

注意你的 DOM – 限制重绘/回流

注意你的递归 – 考虑迭代或记忆

注意你的循环 – 保持小，如果需要，可以随意使用 setTimeout()

循环：

• 减少每次迭代的工作量
• 减少迭代次数

DOM：

• 最小化属性访问 - 在执行操作之前将 DOM 访问器/对象缓存在局部变量中 - 尤其是在循环之前。
• 如果您需要频繁访问项目，请复制到常规数组中

样式属性：

• 尽量减少对样式属性的更改
• 使用所有更改定义 CSS 类并仅更改 className 属性
• 直接在元素上设置cssText
• 对 CSS 更改进行分组以尽量减少重绘/重排

字符串匹配：

• 如果搜索简单的字符串匹配，应尽可能使用indexOf 而不是正则表达式匹配。
• 减少您使用的替换命令的数量，并尝试优化为更少、更高效的替换命令

eval 是邪恶的：

“eval”方法以及“new Function”等相关构造非常浪费。它们实际上要求浏览器创建一个全新的脚本环境（就像创建一个新网页一样），从当前范围导入所有变量，执行脚本，收集垃圾，然后将变量导出回原始环境。此外，不能出于优化目的缓存代码。应尽可能避免使用 eval 及其亲属。

只听你需要的东西：

为BeforeEvent 事件添加事件监听器是最浪费的，因为它会导致所有可能的事件触发，即使它们不需要。通常，这可能是每秒数千个事件。应不惜一切代价避免BeforeEvent，并用适当的BeforeEvent.eventtype 替换。重复的侦听器通常可以替换为提供多个侦听器功能的单个侦听器。

计时器花费太多时间：

由于计时器通常必须以与 eval 相同的方式评估给定代码，因此最好在评估语句中包含尽可能少的代码。不要在 timeout 语句中编写所有代码，而是将其放在一个单独的函数中，然后从 timeout 语句中调用该函数。这允许您使用直接函数引用而不是评估字符串。除了消除 eval 的低效率之外，这还有助于防止在评估代码中创建全局变量。