JS `requestIdleCallback` 与 `requestAnimationFrame`：浏览器渲染周期的调度

咳咳，各位观众老爷们，晚上好！今天咱们来聊聊浏览器渲染周期里两个挺有意思的小伙伴：requestAnimationFrame (简称 rAF) 和 requestIdleCallback (简称 rIC)。这两个家伙，一个负责“争分夺秒”，另一个则“慢条斯理”，都是优化前端性能的利器。咱们争取用最接地气的方式，把它们扒个精光，让大家听完都能灵活运用。

开场白：浏览器渲染周期，你的舞台

想象一下，你写的代码就像个演员，而浏览器就是舞台。演员要在舞台上表演，就得按照剧本（渲染周期）的安排来。这个剧本包括：

JavaScript 执行： 演员排练台词、走位。
样式计算： 化妆师给演员化妆、搭配服装。
布局（Layout）： 确定演员在舞台上的位置。
绘制（Paint）： 演员正式开始表演。
合成（Composite）： 把所有演员的表演合成到一起，呈现在观众面前。

浏览器会不断重复这个过程，每秒钟大约 60 次（取决于你的显示器刷新率），也就是我们常说的 60 FPS (Frames Per Second)。如果某个环节卡壳了，导致渲染周期超过 16.67ms (1000ms / 60)，就会出现掉帧，用户体验就会下降。

主角登场：requestAnimationFrame (rAF)

rAF 就像一个“紧急通知”，告诉浏览器：“哥们儿，下一帧动画要开始了，你赶紧安排一下，让我的代码先执行！”

rAF 的特点：

高优先级： rAF 回调函数会在浏览器准备绘制新的一帧之前执行，属于高优先级任务。
与刷新率同步： rAF 的执行频率与屏幕刷新率一致，通常是 60 FPS。
优化动画性能： 适合执行动画相关的代码，能保证动画流畅。

rAF 的用法：

function animate() {
  // 在这里更新动画相关的数据
  // 比如改变元素的位置、大小、颜色等
  element.style.transform = `translateX(${position}px)`;
  position++;

  // 再次调用 requestAnimationFrame，形成循环
  requestAnimationFrame(animate);
}

// 启动动画
let position = 0;
requestAnimationFrame(animate);

代码解释：

animate() 函数就是我们的动画回调函数，它负责更新动画相关的属性。
element.style.transform = translateX(${position}px)`;` 这行代码改变了元素的位置，实现了简单的水平移动动画。
position++; 更新位置信息。
requestAnimationFrame(animate); 这行代码非常关键，它告诉浏览器在下一帧动画开始前再次调用 animate() 函数，从而形成一个循环，让动画持续运行。
最后，requestAnimationFrame(animate); 启动整个动画循环。

rAF 的优势：

避免掉帧： rAF 确保你的动画代码在浏览器绘制之前执行，避免了不必要的重绘和重排，从而减少了掉帧的可能性。
节能省电： 当页面不可见时（例如切换到其他标签页），rAF 会自动暂停，避免浪费 CPU 资源和电量。
性能优化： 浏览器会对 rAF 进行优化，例如合并多个 rAF 回调函数，减少函数调用的开销。

rAF 的应用场景：

动画： 这是 rAF 最常见的应用场景，例如 CSS 动画、Canvas 动画、SVG 动画等。
游戏： 游戏中的动画、物理引擎等也需要使用 rAF 来保证流畅性。
平滑滚动： 使用 rAF 可以实现更平滑的滚动效果。

反面教材：不用 rAF 的后果

如果不用 rAF，而是使用 setTimeout 或 setInterval 来实现动画，可能会出现以下问题：

掉帧： setTimeout 和 setInterval 的回调函数执行时间是不确定的，可能会错过浏览器的绘制时机，导致掉帧。
性能问题： setTimeout 和 setInterval 即使在页面不可见时也会继续执行，浪费 CPU 资源和电量。

举个栗子：

// 不推荐的写法
setInterval(() => {
  element.style.transform = `translateX(${position}px)`;
  position++;
}, 16.67); // 理论上的 60FPS，但实际上并不靠谱

这段代码看起来好像也能实现动画效果，但实际上它并不能保证动画的流畅性，尤其是在性能较差的设备上。

配角登场：requestIdleCallback (rIC)

rIC 就像一个“空闲时间利用大师”，它告诉浏览器：“哥们儿，如果你现在比较闲，没什么事情做，就帮我执行一下这个回调函数吧！”

rIC 的特点：

低优先级： rIC 回调函数会在浏览器空闲时执行，属于低优先级任务。
延迟执行： rIC 的执行时间是不确定的，可能会延迟到下一帧甚至更晚。
非关键任务： 适合执行一些不紧急、不影响用户体验的任务。

rIC 的用法：

function doSomethingExpensive() {
  // 在这里执行一些耗时的操作，例如数据分析、DOM 操作等
  console.log("执行了一些耗时的操作");
}

// 注册 rIC 回调函数
requestIdleCallback(doSomethingExpensive, { timeout: 1000 });

代码解释：

doSomethingExpensive() 函数就是我们的空闲回调函数，它负责执行一些耗时的操作。
requestIdleCallback(doSomethingExpensive, { timeout: 1000 }); 这行代码注册了一个 rIC 回调函数，并设置了一个超时时间为 1000 毫秒。这意味着，如果浏览器在 1000 毫秒内没有空闲时间，那么 doSomethingExpensive() 函数也会被强制执行。

rIC 的参数：

rIC 回调函数会接收一个 IdleDeadline 对象作为参数，该对象包含以下属性：

timeRemaining(): 返回当前帧剩余的空闲时间（毫秒）。
didTimeout: 表示回调函数是否因为超时而被执行。

rIC 的应用场景：

数据分析： 可以在空闲时间收集用户行为数据，并发送到服务器。
DOM 操作： 可以延迟执行一些不必要的 DOM 操作，例如更新页面内容、添加事件监听器等。
预加载： 可以在空闲时间预加载一些资源，例如图片、脚本、样式等。
第三方库初始化： 可以延迟初始化一些第三方库，避免阻塞主线程。

rIC 的优势：

不影响用户体验： rIC 回调函数只会在浏览器空闲时执行，不会阻塞主线程，从而保证了用户体验。
充分利用资源： rIC 充分利用了浏览器的空闲时间，提高了资源的利用率。

rIC 的缺点：

执行时间不确定： rIC 的执行时间是不确定的，可能会延迟到下一帧甚至更晚，因此不适合执行紧急任务。
兼容性问题： rIC 的兼容性不如 rAF，需要进行兼容性处理。

rIC 的兼容性处理：

window.requestIdleCallback =
  window.requestIdleCallback ||
  function (cb) {
    var start = Date.now();
    return setTimeout(function () {
      cb({
        didTimeout: false,
        timeRemaining: function () {
          return Math.max(0, 50 - (Date.now() - start));
        },
      });
    }, 1);
  };

window.cancelIdleCallback =
  window.cancelIdleCallback ||
  function (id) {
    clearTimeout(id);
  };

这段代码为不支持 rIC 的浏览器提供了一个简单的 polyfill，使用 setTimeout 模拟 rIC 的行为。

rAF 和 rIC 的区别：

为了方便大家理解，我们用一个表格来总结一下 rAF 和 rIC 的区别：

特性	`requestAnimationFrame` (rAF)	`requestIdleCallback` (rIC)
执行时机	下一帧动画开始前	浏览器空闲时
优先级	高	低
适用场景	动画、游戏、平滑滚动	数据分析、DOM 操作、预加载
是否阻塞主线程	否	否
执行时间	确定	不确定

最佳实践：rAF 和 rIC 的组合使用

在实际开发中，我们可以将 rAF 和 rIC 组合使用，以达到更好的性能优化效果。

例如，我们可以在 rAF 中更新动画相关的属性，然后在 rIC 中执行一些不必要的 DOM 操作，例如更新页面内容、添加事件监听器等。

function animate() {
  // 在 rAF 中更新动画相关的属性
  element.style.transform = `translateX(${position}px)`;
  position++;

  // 再次调用 requestAnimationFrame，形成循环
  requestAnimationFrame(animate);

  // 在 rIC 中执行一些不必要的 DOM 操作
  requestIdleCallback(() => {
    // 更新页面内容
    document.getElementById("message").textContent = `当前位置：${position}`;
  });
}

// 启动动画
let position = 0;
requestAnimationFrame(animate);

这段代码在 rAF 中更新元素的位置，然后在 rIC 中更新页面上的消息内容。由于更新消息内容不是动画的关键部分，因此可以将其放在 rIC 中执行，避免阻塞主线程。

高级技巧：利用 timeRemaining() 优化 rIC

IdleDeadline 对象的 timeRemaining() 方法可以返回当前帧剩余的空闲时间，我们可以利用这个方法来优化 rIC 的执行效率。

例如，我们可以将一个耗时的任务分解成多个小任务，然后在 rIC 回调函数中循环执行这些小任务，直到 timeRemaining() 返回 0 为止。

function doSomethingExpensive() {
  // 将耗时的任务分解成多个小任务
  const tasks = [
    () => {
      console.log("执行小任务 1");
    },
    () => {
      console.log("执行小任务 2");
    },
    () => {
      console.log("执行小任务 3");
    },
  ];

  let taskIndex = 0;

  function executeTasks(deadline) {
    // 循环执行小任务，直到 timeRemaining() 返回 0 为止
    while (deadline.timeRemaining() > 0 && taskIndex < tasks.length) {
      tasks[taskIndex]();
      taskIndex++;
    }

    // 如果还有剩余的任务，则再次注册 rIC 回调函数
    if (taskIndex < tasks.length) {
      requestIdleCallback(executeTasks);
    }
  }

  // 注册 rIC 回调函数
  requestIdleCallback(executeTasks);
}

// 执行耗时的任务
doSomethingExpensive();

这段代码将一个耗时的任务分解成三个小任务，然后在 rIC 回调函数中循环执行这些小任务，直到 timeRemaining() 返回 0 为止。如果还有剩余的任务，则再次注册 rIC 回调函数，以便在下一次空闲时间继续执行。

总结：

rAF 和 rIC 都是优化前端性能的利器，它们分别适用于不同的场景。rAF 适合执行动画相关的代码，能保证动画流畅；rIC 适合执行一些不紧急、不影响用户体验的任务。在实际开发中，我们可以将 rAF 和 rIC 组合使用，以达到更好的性能优化效果。

记住，合理利用浏览器渲染周期，让你的代码在最合适的时候执行，才能打造出流畅、高效的用户体验！

好了，今天的讲座就到这里，希望大家有所收获！下课！

发表回复 取消回复

发表回复取消回复