优化 JavaScript 执行

JavaScript 通常会触发视觉变化。有时，是直接通过样式操作实现的，有时则是通过计算（例如搜索或排序数据）实现的。时间安排不当或长时间运行的 JavaScript 是导致性能问题的常见原因。您应尽可能减少其影响。

Paul Lewis
X 首页

JavaScript 通常会触发视觉更改。有时，是直接通过样式操作实现的，有时则是通过计算（例如搜索或排序数据）实现的。时间安排不当或长时间运行的 JavaScript 是导致性能问题的常见原因。您应尽可能减少其影响。

JavaScript 性能分析可以说是一门艺术，因为您编写的 JavaScript 与实际执行的代码完全不同。现代浏览器使用 JIT 编译器以及各种优化和技巧，力求尽可能快速执行，这会显著改变代码的动态性。

尽管如此，您还是可以采取一些措施来帮助应用顺利执行 JavaScript。

摘要

  • 避免使用 setTimeout 或 setInterval 进行视觉更新；请始终改用 requestAnimationFrame。
  • 将长时间运行的 JavaScript 从主线程移至 Web Worker。
  • 使用微任务在多个帧中进行 DOM 更改。
  • 使用 Chrome 开发者工具的时间轴和 JavaScript 性能分析器来评估 JavaScript 的影响。

使用 requestAnimationFrame 进行视觉更改

当屏幕上发生视觉变化时，您希望在浏览器的正确时间执行工作，即在帧开始时。若要确保 JavaScript 会在帧开始时运行，唯一的方法是使用 requestAnimationFrame。

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

框架或示例可以使用 setTimeout 或 setInterval 进行动画等视觉更改，但问题在于回调将在帧的某个时间点运行，可能就在帧结束时运行，这通常会导致我们错过帧，从而导致卡顿。