我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步、可中断,其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两个API。
在 JavaScript 中,requestIdleCallback
是一个用于执行回调函数的 API,该回调函数会在浏览器空闲时执行,而不会影响页面的性能和用户体验。它的作用是在浏览器的空闲时段执行任务,以确保这些任务不会阻塞主线程,从而提高页面的响应性。
具体来说,requestIdleCallback
可以用于执行一些不那么紧急的任务,比如:
执行复杂的计算: 如果有一些需要较长时间才能完成的计算任务,可以使用 requestIdleCallback
将其放在空闲时执行,而不会阻塞用户与页面的交互。
后台数据同步: 可以在空闲时检查是否有需要同步的数据,并进行相应的后台同步操作。
图片懒加载: 对于页面上一些不太重要的图片,可以在空闲时加载,而不影响首屏渲染。
下面是一个简单的示例:
// 在空闲时执行任务
requestIdleCallback(function (deadline) {
while (deadline.timeRemaining() > 0) {
// 执行一些任务
// ...
}
});
deadline
是一个对象,用于提供当前帧的一些信息,而 deadline.timeRemaining()
是一个函数,用于获取当前帧还剩余的时间。
具体来说,deadline.timeRemaining()
返回一个表示当前帧剩余时间的毫秒数。在回调函数执行期间,可以多次调用这个函数,以检查当前帧是否还有足够的时间来执行任务。
requestIdleCallback
的第二个参数是一个 options
对象,用于配置回调函数的行为。这个对象有以下属性:
requestIdleCallback(
function (deadline) {
// 执行任务
},
{ timeout: 1000 } // 设置最大执行时间为 1000 毫秒
);
AbortSignal
对象,可以用来取消回调函数的执行。当传递了这个参数时,如果 AbortSignal
被触发,回调函数会被取消。const controller = new AbortController();
const signal = controller.signal;
// 启动回调函数
requestIdleCallback(
function (deadline) {
// 执行任务
},
{ signal }
);
// 在需要的时候取消
controller.abort();
这两个参数提供了对回调函数执行的一些控制和限制。在实际使用时,可以根据任务的性质和需求进行配置。
需要注意的是,requestIdleCallback
并不是所有浏览器都支持的标准 API,可能需要进行兼容性处理。另外,由于浏览器对空闲时段的定义可能不同,因此在实际使用时,应该根据具体情况进行测试和调整。最新的浏览器也提供了 requestAnimationFrame
和 requestAnimationFrame
方法来执行类似的任务。
大家都知道异步任务分为宏任务和微任务,要搞清楚 requestAnimationFrame
和 requestIdleCallback
是宏任务还是微任务就必须要搞清楚下面几个问题:
requestAnimationFrame
在哪个阶段执行,是在渲染前还是渲染后?是在微任务执行前还是执行后?requestIdleCallback
在哪个阶段执行,是在渲染前还是渲染后?是在微任务执行前还是执行后?console.log(22)
requestIdleCallback(()=>{
console.log(11)
})
console.log(33)
requestAnimationFrame(()=>{
console.log("动画")
})
requestAnimationFrame和requestIdleCallback是和宏任务性质一样的任务,只是他们的执行时机不同而已。也有人说它们既不是宏任务也不是微任务,其实我们不必纠结这个,我们所要做的就是知道他们的执行时机就好。
浏览器在每一轮Event Loop事件循环中不一定会去重新渲染屏幕,会根据浏览器刷新率以及页面性能或是否后台运行等因素判断的,浏览器的每一帧是比较固定的,会尽量保持60Hz的刷新率运行,每一帧中间可能会进行多轮事件循环。