JS `requestIdleCallback`：在浏览器空闲时执行低优先级任务

嘿，大家好，我是你们今天的JS老司机，咱们今天聊点轻松的，关于requestIdleCallback。别怕，它不是什么高深的黑魔法，只是浏览器给我们提供的一个小工具，让我们在浏览器闲着没事干的时候，偷偷摸摸地跑点不那么重要的代码。就像你打游戏的时候，如果游戏画面卡顿了，你肯定希望游戏能优先保证流畅运行，而不是突然跳出来一个弹窗问你要不要升级VIP。 requestIdleCallback就是扮演这个“保证流畅运行”的角色。

一、啥是requestIdleCallback？

简单来说，requestIdleCallback是一个浏览器API，它允许你安排一些低优先级的任务，这些任务只有在浏览器空闲的时候才会执行。这里的“空闲”指的是浏览器主线程没有其他更重要的任务需要处理，比如渲染页面、响应用户输入等等。

想象一下，你的浏览器就像一个餐厅的服务员。当客人很多，点餐、上菜忙不过来的时候，服务员肯定会优先服务客人，而不会去整理餐具或者擦桌子。但是，如果客人不多，服务员闲下来了，他就可以顺便整理一下餐具、擦擦桌子，让餐厅更整洁。

requestIdleCallback就相当于告诉浏览器：“嘿，老哥，我这里有一些不太着急的任务，你啥时候闲下来了，就帮我跑一下，不着急哈！”。

二、为什么要用requestIdleCallback？

你可能会问：“我直接用setTimeout或者setInterval不行吗？为什么要用这个requestIdleCallback？”

当然可以！ setTimeout和setInterval也能实现类似的效果，但是它们有一个问题：它们是基于时间的，而不是基于浏览器空闲状态的。

这意味着，即使浏览器正在忙着渲染页面，setTimeout和setInterval也会按照设定的时间间隔执行你的代码，这可能会导致页面卡顿，影响用户体验。

而requestIdleCallback则更加智能，它会根据浏览器的实际情况来决定是否执行你的代码，从而避免了不必要的性能问题。

用表格对比一下：

特性	`setTimeout`/`setInterval`	`requestIdleCallback`
执行时机	基于时间	基于浏览器空闲状态
优先级	较高	较低
是否可能阻塞主线程	可能	不太可能
适用场景	对时间要求严格的任务	低优先级、非关键任务

三、怎么用requestIdleCallback？

requestIdleCallback的使用方法非常简单，它接受一个回调函数作为参数，这个回调函数会在浏览器空闲的时候被调用。

function myIdleCallback(deadline) {
  // deadline.timeRemaining() 返回当前闲置周期的剩余时间（毫秒）
  // deadline.didTimeout  表示任务是否因为超时而被执行

  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    let task = tasks.shift();
    task(); // 执行任务
  }

  if (tasks.length > 0) {
    // 还有任务未完成，继续请求下一次空闲回调
    requestIdleCallback(myIdleCallback);
  } else {
    console.log("所有任务已完成！");
  }
}

let tasks = [];
// 添加一些任务到任务队列
for (let i = 0; i < 100; i++) {
  tasks.push(() => {
    console.log(`执行任务 ${i}`);
    // 模拟耗时操作
    for (let j = 0; j < 1000000; j++) {
      // 空循环，模拟耗时
    }
  });
}

requestIdleCallback(myIdleCallback);

代码解释：

myIdleCallback(deadline)函数： 这是我们的回调函数，它会在浏览器空闲时被调用。 deadline对象包含了关于当前空闲时间的信息。
deadline.timeRemaining()： 这个方法返回当前空闲周期的剩余时间（毫秒）。我们可以用它来判断是否还有时间执行更多的任务。
tasks数组： 这是一个任务队列，存放着我们需要执行的低优先级任务。
循环执行任务： 在while循环中，我们不断从tasks数组中取出任务并执行，直到deadline.timeRemaining()小于等于0，或者tasks数组为空。
requestIdleCallback(myIdleCallback)： 调用requestIdleCallback函数，将myIdleCallback注册为回调函数。浏览器会在空闲的时候调用它。
超时判断： deadline.didTimeout属性指示回调是否由于超时而执行。如果为true，则表示浏览器没有足够的时间在下一个帧之前调用回调。

四、 deadline对象是什么？

在requestIdleCallback的回调函数中，我们会接收到一个deadline对象，这个对象包含了关于当前空闲时间的信息。 deadline对象有两个属性：

timeRemaining()： 返回当前空闲周期的剩余时间（毫秒）。你可以用它来判断是否还有时间执行更多的任务。
didTimeout： 一个布尔值，指示回调是否由于超时而执行。如果为true，则表示浏览器没有足够的时间在下一个帧之前调用回调。

五、实际应用场景

requestIdleCallback在很多场景下都能派上用场，例如：

数据分析： 你可以在浏览器空闲的时候收集用户行为数据，然后发送到服务器进行分析。这样可以避免在用户操作时发送数据，从而提高用户体验。
预加载资源： 你可以在浏览器空闲的时候预加载一些资源，例如图片、字体等等。这样可以在用户需要这些资源的时候，更快地加载它们。
更新缓存： 你可以在浏览器空闲的时候更新缓存，例如更新本地存储的数据等等。这样可以确保用户在下次访问页面的时候，能够获取到最新的数据。
执行不重要的计算： 例如，一些不影响用户体验的复杂计算，可以在空闲时进行。

代码示例：预加载图片

function preloadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = () => resolve();
    img.onerror = () => reject();
  });
}

function idlePreload(deadline) {
  while (deadline.timeRemaining() > 0 && imageUrls.length > 0) {
    const url = imageUrls.shift();
    preloadImage(url)
      .then(() => console.log(`图片 ${url} 预加载成功`))
      .catch(() => console.log(`图片 ${url} 预加载失败`));
  }

  if (imageUrls.length > 0) {
    requestIdleCallback(idlePreload);
  } else {
    console.log("所有图片预加载完成！");
  }
}

const imageUrls = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg",
  "image4.jpg",
  "image5.jpg",
];

requestIdleCallback(idlePreload);

这个例子展示了如何使用requestIdleCallback来预加载图片。 idlePreload函数会在浏览器空闲的时候，从imageUrls数组中取出图片URL，然后调用preloadImage函数来预加载图片。

六、注意事项

虽然requestIdleCallback非常有用，但是在使用的时候也需要注意一些事项：

不要执行耗时操作： requestIdleCallback的回调函数应该尽量避免执行耗时操作，因为这可能会导致浏览器卡顿。如果你需要执行耗时操作，可以考虑使用Web Workers。
处理超时情况： requestIdleCallback的回调函数可能会因为超时而被执行。你需要处理这种情况，例如可以将未完成的任务添加到下一次空闲回调中。
浏览器兼容性： requestIdleCallback并不是所有浏览器都支持。你需要检查浏览器的兼容性，或者使用polyfill。目前，主流浏览器都支持该API。
任务优先级： requestIdleCallback的任务优先级非常低，这意味着它可能会被延迟执行，甚至永远不会被执行。因此，不要将重要的任务放在requestIdleCallback中。

七、 Polyfill

如果你的项目需要兼容不支持requestIdleCallback的浏览器，你可以使用polyfill。一个简单的polyfill可以这样实现：

window.requestIdleCallback =
  window.requestIdleCallback ||
  function (cb) {
    const 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);
  };

这段代码简单地模拟了requestIdleCallback的功能，使用setTimeout来模拟浏览器的空闲时间。虽然这个polyfill不如原生实现那么智能，但是它可以让你在不支持requestIdleCallback的浏览器上也能使用这个API。

八、总结

requestIdleCallback是一个非常有用的API，它可以让你在浏览器空闲的时候执行一些低优先级的任务，从而提高用户体验。但是，在使用的时候也需要注意一些事项，例如不要执行耗时操作、处理超时情况等等。

总的来说，requestIdleCallback就像一位默默奉献的老黄牛，它会在你不知不觉中为你完成一些琐碎的工作，让你的网页更加流畅、高效。所以，如果你有一些不那么重要的任务需要执行，不妨考虑一下使用requestIdleCallback吧！

好了，今天的讲座就到这里，希望大家有所收获！记住，写代码要像写诗一样，优雅、简洁、高效！咱们下次再见！

发表回复 取消回复

发表回复取消回复