介绍一下requestAnimationFrame和requestIdleCallback
当我们需要执行动画或其他高性能操作时,常常会遇到以下问题:
- 任务的执行频率过高,对 CPU 和内存造成了大量的压力。
- 任务的优先级较高,导致其他任务无法及时得到处理。
为了解决这些问题,JavaScript 提供了两个调度 API:requestAnimationFrame
和 requestIdleCallback
。
requestAnimationFrame
requestAnimationFrame
用于在下一帧渲染之前执行动画或其他任务,确保任务在浏览器的重绘之前执行,以获得最佳的性能和动画效果。它接收一个回调函数作为参数,回调函数会在下一次浏览器重绘之前被调用。由于动画每秒通常需要执行60次,因此可以使用 requestAnimationFrame
在适当的时间更新动画,而不会对 CPU 和内存造成过大的压力。
使用 requestAnimationFrame
的基本流程如下:
- 定义一个动画函数,用于更新动画状态。
- 在动画函数中调用
requestAnimationFrame
函数,以便在下一帧动画之前再次执行动画函数。
function animate() {
// 更新动画状态的代码
requestAnimationFrame(animate);
}
// 启动动画
requestAnimationFrame(animate);
上面的代码中,我们定义了一个 animate
函数,它用于更新动画状态。在 animate
函数中,我们通过调用 requestAnimationFrame
函数来启动下一帧动画。由于 requestAnimationFrame
会在浏览器下一次绘制之前调用回调函数,因此可以保证动画逻辑总是在正确的时间执行。
需要注意的是,由于 requestAnimationFrame
的执行频率与浏览器的刷新率相关,因此可能会出现跳帧的情况。如果我们需要更高的帧率,可以尝试使用 requestAnimationFrame
的多个实例来实现。
requestIdleCallback
requestIdleCallback
则用于调度对 CPU 和内存影响较大的任务,以确保它们在浏览器空闲时执行。它接收一个回调函数作为参数,该回调函数会在浏览器空闲时被调用。这意味着 requestIdleCallback
的优先级比 requestAnimationFrame
更低,因此它更适合用于执行那些不需要及时更新的任务,例如计算、数据处理和网络请求。
使用 requestIdleCallback
的基本流程如下:
- 定义一个需要执行的任务函数。
- 使用
requestIdleCallback
函数来调度任务函数的执行。
function process() {
// 执行较为耗时的任务
}
// 使用 requestIdleCallback 来调度任务的执行
if ('requestIdleCallback' in window) {
requestIdleCallback(process);
} else {
setTimeout(process, 0);
}
在上面的代码中,我们定义了一个 process
函数,它用于执行一些较为耗时的任务。使用 requestIdleCallback
函数来调度任务的执行,这样可以确保任务在浏览器空闲时执行,不会影响其他任务的执行。
需要注意以下几点:
- 兼容性问题:虽然
requestAnimationFrame
和requestIdleCallback
都是浏览器提供的 API,但它们的兼容性并不是所有浏览器都支持。需要在使用之前进行兼容性检查和处理,以确保代码能够在不同浏览器中正常运行。 requestAnimationFrame
可能会导致卡顿:尽管requestAnimationFrame
能够提高动画性能,但是在某些情况下可能会导致卡顿。如果动画逻辑过于复杂或者存在多个requestAnimationFrame
实例,可能会导致帧率下降,从而影响动画的流畅度。requestIdleCallback
不保证立即执行:虽然requestIdleCallback
会在浏览器空闲时执行回调函数,但它并不保证回调函数会立即执行。因此,如果任务需要立即执行,可能需要使用setTimeout
或者setImmediate
来代替requestIdleCallback
。requestIdleCallback
回调函数需要考虑时间:由于requestIdleCallback
回调函数会在浏览器空闲时执行,因此需要注意回调函数的执行时间,以避免在空闲时间结束之前无法完成任务。
总之,尽管 requestAnimationFrame
和 requestIdleCallback
都是优化 JavaScript 性能的重要工具,但在使用之前需要了解其适用场景和注意事项,以确保代码能够稳定高效地运行。
转载自:https://juejin.cn/post/7217601930917855269