requestIdleCallback

一般浏览器的刷新率为 60HZ,即 1 秒钟刷新 60 次。1000ms / 60hz = 16.6,大概每过 16.6ms 浏览器会渲染一帧画面。

在这段时间内,浏览器大体会做两件事:taskrender

task -> requestAnimationFrame -> render -> requestIdleCallback

如果渲染完成后还有空闲时间,则 requestIdleCallback API 会被调用。

掉帧与时间切片

如果 task 执行时间超过了 16.6ms(比如 task 中有个很耗时的 while 循环)。

那么这一帧就没有时间 render,页面直到下一帧 render 后才会更新。表现为页面卡顿一帧,或者说掉帧。

最好的办法是时间切片,把长时间 task 分割为几个短时间 task

为了解决掉帧造成的卡顿,React16 将递归的构建方式改为可中断的遍历。React16 就是基于 requestIdleCallbackAPI,实现了自己的 Fiber Reconciler。

5ms 的执行时间划分 task,每遍历完一个节点,就检查当前 task 是否已经执行了 5ms

如果超过 5ms,则中断本次 task

通过将 task 执行时间切分为一个个小段,减少长时间 task 造成无法 render 的情况,这就是时间切片。