屏幕刷新率

• 目前大多数设备的屏幕刷新率是60次每秒
• 浏览器渲染动画或者页面的每一帧的速率也需要根设备屏幕的刷新率保持一致
• 页面是一帧一帧绘制出来的，当每秒的帧数（FPS）达到60，页面是流畅的，小于这个值，用户会感觉到卡顿
• 每一帧的预算时间大概是16.6ms
• 1s 60帧，所以每帧时间大概16.6ms，我们书写代码时力求不让每一帧工作量超过16.6

每帧浏览器都做了什么

1. 阻塞输入事件（输入事件，触摸事件，鼠标滚动事件），非阻塞输入事件（点击，键盘事件）。因为和用户交互，优先级最高
2. 定时器，js脚本，微任务
3. 开始帧（每一帧的事件，如窗口resize事件，滚动，媒体查询事件）
4. requestAnimateFrame
5. layout布局，计算样式，更新布局
6. 绘制paint，记录，合成图层等
7. 空闲阶段（idle peroid）requestIdleCallback

requestAnimationFrame

该api告诉浏览器，希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

执行时机是每一帧浏览器进行渲染之前，是一个高优的任务。

当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。

回调函数执行次数通常是每秒 60 次，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，因此在大多数浏览器里，当requestAnimationFrame() 运行在后台标签页或者隐藏的