requestIdleCallback函数

我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步、可中断，其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两个API。所以这里我们有必要了解一下这两个API。

FPS（屏幕刷新率）

目前大多数设备的屏幕刷新率为 60 次/秒，每个帧的预算时间是16.66 毫秒 (1秒/60)，1s 60帧，所以每一帧分到的时间是 1000/60 ≈ 16 ms。所以我们书写代码时力求不让一帧的工作量超过 16ms。

了解每一帧

每个帧的开头包括样式计算、布局和绘制，JavaScript执行 Javascript引擎和页面渲染引擎在同一个渲染线程,GUI渲染和Javascript执行两者是互斥的，如果某个任务执行时间过长，浏览器会推迟渲染。

我们所看到的网页，都是浏览器一帧一帧绘制出来的，通常认为FPS为60的时候是比较流畅的，而FPS为个位数的时候就属于用户可以感知到的卡顿了，那么在一帧里面浏览器都要做哪些事情呢，如下所示：

requestAnimationFrame回调函数会在绘制之前执行，requestIdleCallback是在绘制之后执行。

假如某一帧里面要执行的任务不多，在不到16ms（1000/60)的时间内就完成了上述任务的话，那么这一帧就会有一定的空闲时间，这段时间就恰好可以用来执行requestIdleCallback的回调，如下图所示：

由于requestIdleCallback利用的是帧的空闲时间，所以就有可能出现浏览器一直处于繁忙状态，导致回调一直无法执行，这其实也并不是我们期望的结果，那么这种情况我们就需要在调用requestIdleCallback的时候传入第二个配置参数timeout了？

requestIdleCallback(myNonEssentialWork, { timeout: 2000 });