我怎样才能编写更快的JavaScript？

Question

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

除了逻辑优化（例如，只重绘已更改的可视化部分），我可以做些什么来优化JavaScript的CPU使用率？我愿意为性能牺牲一些可读性和可扩展性。是否有一个很重要的清单，因为我的谷歌技能很糟糕？我有一些想法，但我不确定它们是否值得：

• 限制功能调用
• 如果可能，请使用数组而不是对象和属性
• 尽可能使用变量来计算数学运算结果
• 缓存常见的数学运算，例如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相同的方式评估给定代码，所以最好在evaluate语句中包含尽可能少的代码。而不是在timeout语句中写入所有代码，而是将它放在一个单独的函数中，并从timeout语句中调用该函数。这允许您使用直接函数引用而不是计算字符串。除了消除eval的低效率之外，这还有助于防止在评估的代码中创建全局变量。