介绍一下requestAnimationFrame和requestIdleCallback

2023年4月18日下午2:24 • JavaScript

当我们需要执行动画或其他高性能操作时，常常会遇到以下问题：

- 任务的执行频率过高，对 CPU 和内存造成了大量的压力。
- 任务的优先级较高，导致其他任务无法及时得到处理。

为了解决这些问题，JavaScript 提供了两个调度 API：requestAnimationFrame 和 requestIdleCallback。

requestAnimationFrame

requestAnimationFrame 用于在下一帧渲染之前执行动画或其他任务，确保任务在浏览器的重绘之前执行，以获得最佳的性能和动画效果。它接收一个回调函数作为参数，回调函数会在下一次浏览器重绘之前被调用。由于动画每秒通常需要执行60次，因此可以使用 requestAnimationFrame 在适当的时间更新动画，而不会对 CPU 和内存造成过大的压力。

使用 requestAnimationFrame 的基本流程如下：

1. 定义一个动画函数，用于更新动画状态。
2. 在动画函数中调用 requestAnimationFrame 函数，以便在下一帧动画之前再次执行动画函数。

function animate() {
  // 更新动画状态的代码
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

上面的代码中，我们定义了一个 animate 函数，它用于更新动画状态。在 animate 函数中，我们通过调用 requestAnimationFrame 函数来启动下一帧动画。由于 requestAnimationFrame 会在浏览器下一次绘制之前调用回调函数，因此可以保证动画逻辑总是在正确的时间执行。

需要注意的是，由于 requestAnimationFrame 的执行频率与浏览器的刷新率相关，因此可能会出现跳帧的情况。如果我们需要更高的帧率，可以尝试使用 requestAnimationFrame 的多个实例来实现。

requestIdleCallback

requestIdleCallback 则用于调度对 CPU 和内存影响较大的任务，以确保它们在浏览器空闲时执行。它接收一个回调函数作为参数，该回调函数会在浏览器空闲时被调用。这意味着 requestIdleCallback 的优先级比 requestAnimationFrame 更低，因此它更适合用于执行那些不需要及时更新的任务，例如计算、数据处理和网络请求。

使用 requestIdleCallback 的基本流程如下：

1. 定义一个需要执行的任务函数。
2. 使用 requestIdleCallback 函数来调度任务函数的执行。

function process() {
  // 执行较为耗时的任务
}

// 使用 requestIdleCallback 来调度任务的执行
if ('requestIdleCallback' in window) {
  requestIdleCallback(process);
} else {
  setTimeout(process, 0);
}

在上面的代码中，我们定义了一个 process 函数，它用于执行一些较为耗时的任务。使用 requestIdleCallback 函数来调度任务的执行，这样可以确保任务在浏览器空闲时执行，不会影响其他任务的执行。

需要注意以下几点：

1. 兼容性问题：虽然 requestAnimationFrame 和 requestIdleCallback 都是浏览器提供的 API，但它们的兼容性并不是所有浏览器都支持。需要在使用之前进行兼容性检查和处理，以确保代码能够在不同浏览器中正常运行。
1. requestAnimationFrame 可能会导致卡顿：尽管 requestAnimationFrame 能够提高动画性能，但是在某些情况下可能会导致卡顿。如果动画逻辑过于复杂或者存在多个 requestAnimationFrame 实例，可能会导致帧率下降，从而影响动画的流畅度。
2. requestIdleCallback 不保证立即执行：虽然 requestIdleCallback 会在浏览器空闲时执行回调函数，但它并不保证回调函数会立即执行。因此，如果任务需要立即执行，可能需要使用 setTimeout 或者 setImmediate 来代替 requestIdleCallback。
3. requestIdleCallback 回调函数需要考虑时间：由于 requestIdleCallback 回调函数会在浏览器空闲时执行，因此需要注意回调函数的执行时间，以避免在空闲时间结束之前无法完成任务。