网站建设策划实施要素,合同管理软件,重庆泡沫字制作,山东外贸建站什么是requestIdleCallback?
我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步、可中断#xff0c;其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两个API。 在 JavaScript 中#xff0c;requestIdleCallback 是一个用于执行回调函…什么是requestIdleCallback?
我们都知道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 对象用于配置回调函数的行为。这个对象有以下属性
timeout (可选): 用于指定回调函数执行的最大时间。如果在指定的时间内回调函数没有完成它仍然会在空闲时执行但是会提前终止。这可以用来确保回调函数在有限的时间内完成以避免长时间运行的任务影响用户体验。这个值是一个毫秒数。
requestIdleCallback(function (deadline) {// 执行任务},{ timeout: 1000 } // 设置最大执行时间为 1000 毫秒
);signal (可选): 这是一个 AbortSignal 对象可以用来取消回调函数的执行。当传递了这个参数时如果 AbortSignal 被触发回调函数会被取消。
const controller new AbortController();
const signal controller.signal;// 启动回调函数
requestIdleCallback(function (deadline) {// 执行任务},{ signal }
);// 在需要的时候取消
controller.abort();这两个参数提供了对回调函数执行的一些控制和限制。在实际使用时可以根据任务的性质和需求进行配置。
需要注意的是requestIdleCallback 并不是所有浏览器都支持的标准 API可能需要进行兼容性处理。另外由于浏览器对空闲时段的定义可能不同因此在实际使用时应该根据具体情况进行测试和调整。最新的浏览器也提供了 requestAnimationFrame 和 requestAnimationFrame 方法来执行类似的任务。
requestAnimationFrame和requestIdleCallback是宏任务还是微任务
大家都知道异步任务分为宏任务和微任务要搞清楚 requestAnimationFrame 和 requestIdleCallback 是宏任务还是微任务就必须要搞清楚下面几个问题
浏览器在每一轮Event Loop事件循环中都会去渲染屏幕吗requestAnimationFrame在哪个阶段执行是在渲染前还是渲染后是在微任务执行前还是执行后requestIdleCallback在哪个阶段执行是在渲染前还是渲染后是在微任务执行前还是执行后
console.log(22)
requestIdleCallback((){console.log(11)
})console.log(33)
requestAnimationFrame((){console.log(动画)
})requestAnimationFrame和requestIdleCallback是和宏任务性质一样的任务只是他们的执行时机不同而已。也有人说它们既不是宏任务也不是微任务其实我们不必纠结这个我们所要做的就是知道他们的执行时机就好。 浏览器在每一轮Event Loop事件循环中不一定会去重新渲染屏幕会根据浏览器刷新率以及页面性能或是否后台运行等因素判断的浏览器的每一帧是比较固定的会尽量保持60Hz的刷新率运行每一帧中间可能会进行多轮事件循环。
requestAnimationFrame回调的执行与task和microtask无关而是与浏览器是否渲染相关联的。它是在浏览器渲染前在微任务执行后执行。requestIdleCallback是在浏览器渲染后有空闲时间时执行如果requestIdleCallback设置了第二个参数timeout则会在超时后的下一帧强制执行。
