浏览器的 16ms 渲染帧

渲染帧是指浏览器一次完整绘制过程，帧之间的时间间隔是DOM视图更新的最小间隔。
由于主流的屏幕刷新率都在60hz，因此渲染一帧的事件就必须控制在16.7ms内才能保证不掉帧。也就是说每一次渲染都要在 16.7ms 内页面才够流畅不会有卡顿感。 这段时间内浏览器需要完成如下事情：

• js执行：脚本造成了需要重绘的改动，比如增删 DOM、请求动画等
• 样式计算
• layout
• paint：各层分别进行绘制（比如 3D 动画）
• 合成：合成各层渲染结果。

一个帧内要做这么多事情……如果js执行时间过长超过16.7ms，就会block住，那么就会丢掉一次帧的绘制。
一般一个帧内的多次DOM改动会被合并渲染。

---

window.requestAnimationFrame用于在下一个渲染帧之前执行一个回调函数。
可以用来做逐帧动画，这会使你的动画函数先于浏览器重绘动作。通常来说，被调用的频率就是60hz。

参考文章
浏览器的 16ms 渲染帧