requestIdleCallback
题目
是否了解过 requestIdleCallback ?
由 React Fiber 引起的关注
React 16 内部使用 Fiber ,即组件渲染过程可以暂停,先去执行高优任务,CPU 闲置时再继续渲染。
其中用到的核心 API 就是 requestIdleCallback 。
requestAnimationFrame 每次渲染都执行,高优
页面的渲染是一帧一帧进行的,至少每秒 60 次(即 16.6ms 一次)才能肉眼感觉流畅。所以,网页动画也要这个帧率才能流畅。
用 JS 来控制时间是不靠谱的,因为 JS 执行本身还需要时间,而且 JS 和 DOM 渲染线程互斥。所以 ms 级别的时间会出现误差。
requestAnimationFrame
就解决了这个问题,浏览器每次渲染都会执行,不用自己计算时间。
代码参考 requestAnimationFrame.html
requestIdleCallback 空闲时才执行,低优
requestIdleCallback 会在网页渲染完成后,CPU 空闲时执行,不一定每一帧都执行。
requestIdleCallback 不适合执行 DOM 操作,因为修改了 DOM 之后下一帧不一定会触发修改。
宏任务
requestAnimationFrame 和 requestIdleCallback 都是宏任务,它们比 setTimeout 更晚触发。
使用场景
requestAnimationFrame 可用于网页动画。
requestIdleCallback 可用于一些低优先级的场景,以代替 setTimeout 。例如发送统计数据。
但请注意 requestIdleCallback 的浏览器兼容性
答案
requestIdleCallback 可在网页渲染完成后,CPU 空闲时执行,用于低优先级的任务处理。