60fps 布局和渲染

在项目中达到 60fps 与用户的互动度直接相关,这对取得成功至关重要。在本次演讲中,Nat 和 Tom 谈到了 Chrome 的渲染管道,一些丢帧的常见原因以及如何避免丢失。

幻灯片

  • 帧的长度为 16 毫秒。它包含 JavaScript、样式计算、绘制和合成。
  • 绘制开销极高。在 Paint Storm 中,您不必要地重复运行开销大的绘制工作。
  • 图层用于缓存绘制的元素。
  • 输入处理程序(触摸和鼠标滚轮监听器)会终止响应;如果可以,请避免使用它们。同时又无法将效果降至最低。