JavaScript内核与高级编程之：`requestIdleCallback`：利用浏览器空闲时间执行任务的底层原理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

呦，各位好！今天咱们来聊聊一个有点神秘，但又相当实用的东西：requestIdleCallback。别看名字长，其实它干的活儿挺简单，就是利用浏览器“摸鱼”的时间来帮你干活。

一、什么是requestIdleCallback？（摸鱼时间管理大师）

想象一下，你是个浏览器，每天要处理用户的各种请求：渲染网页、响应用户操作、执行JavaScript代码…忙得脚不沾地。但总有那么一些时间，你稍微轻松一点，比如用户正在看网页，没怎么操作，或者刚加载完网页，还没开始互动。这些时间段，就是你的“空闲时间”。

requestIdleCallback，就是让你告诉浏览器：“老铁，我这里有些不着急的活儿，你啥时候摸鱼有空了，就帮我干了呗！”

简单来说，requestIdleCallback 允许你安排一些优先级较低的任务，在浏览器空闲时执行，从而避免阻塞主线程，保证用户体验的流畅性。 就像你把一些不重要的家务，比如整理书架，安排在周末的空闲时间来做，而不是工作日晚上累个半死的时候。

二、requestIdleCallback怎么用？（指令下达的姿势）

requestIdleCallback 是一个全局函数，接受两个参数：

callback (必需): 这是一个回调函数，包含你要执行的“摸鱼任务”。这个函数会接收一个 IdleDeadline 对象作为参数，里面包含了关于当前空闲时间的信息。
options (可选): 一个对象，目前只有一个属性：timeout。 timeout 用于设置任务执行的截止时间。如果到了截止时间，浏览器还没来得及执行你的任务，那么它也会强制执行。

代码示例：

requestIdleCallback(myExpensiveTask, { timeout: 2000 });

function myExpensiveTask(deadline) {
  // deadline.timeRemaining()：返回当前帧剩余的空闲时间（毫秒）。
  // deadline.didTimeout：如果任务因为超时而执行，则为 true。

  while (deadline.timeRemaining() > 0 && thereIsMoreWorkToDo()) {
    doSomeWork(); // 执行一些任务
  }

  if (thereIsMoreWorkToDo()) {
    // 还有活儿没干完，重新安排任务
    requestIdleCallback(myExpensiveTask, { timeout: 2000 });
  } else {
    console.log("所有任务都完成了！");
  }
}

function thereIsMoreWorkToDo() {
  // 假设这里有一个全局变量表示是否还有任务没完成
  return window.tasksRemaining > 0;
}

function doSomeWork() {
  // 这里模拟执行一些任务
  console.log("正在执行任务...");
  window.tasksRemaining--; // 减少任务数量
}

// 初始化任务数量
window.tasksRemaining = 10;

代码解释：

我们调用 requestIdleCallback 函数，告诉浏览器我们要执行 myExpensiveTask 函数。
myExpensiveTask 函数接收一个 deadline 对象。
在 myExpensiveTask 函数中，我们使用 while 循环，只要还有空闲时间，并且还有任务没完成，就一直执行 doSomeWork 函数。
deadline.timeRemaining() 返回当前帧剩余的空闲时间（毫秒）。我们可以利用这个时间来控制任务的执行时长，避免一次性占用太多空闲时间，影响用户体验。
deadline.didTimeout 表示任务是否因为超时而被强制执行。
如果还有任务没完成，我们就重新调用 requestIdleCallback 函数，继续安排任务。
如果所有任务都完成了，我们就输出一条消息。

重要提示：

requestIdleCallback 不保证一定执行。浏览器可能会因为各种原因（比如用户进行了新的操作，或者浏览器需要执行更重要的任务）而取消你的任务。
requestIdleCallback 不要执行耗时太长的任务。如果在回调函数中执行了耗时太长的任务，可能会导致浏览器卡顿，影响用户体验。
timeout 属性要慎用。如果设置了 timeout，并且到了截止时间浏览器还没来得及执行你的任务，那么它会强制执行。这可能会导致主线程阻塞，影响用户体验。

三、IdleDeadline 对象：空闲时间的说明书

IdleDeadline 对象是 requestIdleCallback 回调函数的参数，它提供了关于当前空闲时间的信息。它有两个属性：

timeRemaining(): 返回当前帧剩余的空闲时间（毫秒）。你可以利用这个时间来控制任务的执行时长。
didTimeout: 如果任务因为超时而执行，则为 true。

使用 IdleDeadline 的好处：

可以更精细地控制任务的执行时长。 你可以根据剩余的空闲时间来决定执行多少任务，避免一次性占用太多空闲时间。
可以判断任务是否因为超时而被强制执行。 如果任务因为超时而被强制执行，你可以采取一些措施，比如降低任务的优先级，或者将任务分解成更小的块。

四、requestIdleCallback的适用场景：（哪些活儿可以摸鱼干？）

requestIdleCallback 适用于那些优先级较低，不需要立即执行，但又需要执行的任务。简单来说，就是那些“锦上添花”的任务，而不是“雪中送炭”的任务。

一些常见的适用场景包括：

数据分析和统计: 比如收集用户行为数据，或者生成报表。
更新不重要的UI元素: 比如更新一些不经常变化的UI元素，或者更新一些次要的UI元素。
预加载资源: 比如预加载一些图片或者字体。
执行一些后台任务: 比如清理缓存，或者同步数据。
任何可以延迟执行的任务，只要不影响用户体验。

表格总结：适用与不适用场景

适用场景	不适用场景
数据分析和统计	响应用户交互（点击、滚动等）
更新不重要的UI元素	动画效果
预加载资源	关键渲染路径（影响首次加载速度）
执行一些后台任务（清理缓存、同步数据等）	需要立即执行的任务
可以延迟执行的任务，不影响用户体验	任何会阻塞主线程，导致卡顿的任务

五、requestIdleCallback的兼容性：（老古董浏览器怎么办？）

虽然requestIdleCallback是个好东西，但并不是所有浏览器都支持它。特别是那些“老古董”浏览器，可能还不认识这个函数。

兼容性：

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Internet Explorer	不支持

解决方案：

如果你的应用需要兼容那些不支持 requestIdleCallback 的浏览器，你需要使用一个 polyfill。

一个简单的 polyfill 如下：

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);
  };

代码解释：

如果浏览器支持 requestIdleCallback，就使用原生的 requestIdleCallback 函数。
如果浏览器不支持 requestIdleCallback，就使用 setTimeout 函数来模拟 requestIdleCallback 函数。
setTimeout 函数会在 1 毫秒后执行回调函数。
在回调函数中，我们模拟了一个 IdleDeadline 对象，并设置了 timeRemaining 属性，表示剩余的空闲时间。

六、requestIdleCallback的注意事项：（使用姿势很重要！）

使用 requestIdleCallback 时，需要注意以下几点：

不要执行耗时太长的任务。 如果在回调函数中执行了耗时太长的任务，可能会导致浏览器卡顿，影响用户体验。
不要依赖于任务的执行顺序。 requestIdleCallback 的任务执行顺序是不确定的，所以不要依赖于任务的执行顺序。
合理设置 timeout 属性。 如果设置了 timeout，并且到了截止时间浏览器还没来得及执行你的任务，那么它会强制执行。这可能会导致主线程阻塞，影响用户体验。
使用 polyfill 来兼容不支持 requestIdleCallback 的浏览器。
避免频繁调用 requestIdleCallback。 频繁调用 requestIdleCallback 会增加浏览器的负担，影响性能。尽量将多个任务合并成一个任务，或者使用节流函数来限制 requestIdleCallback 的调用频率。

七、代码示例：优化图片加载

这是一个使用 requestIdleCallback 优化图片加载的示例：

const images = document.querySelectorAll("img[data-src]");

function preloadImage(image) {
  const src = image.dataset.src;
  if (!src) return;

  image.src = src;
  image.onload = () => {
    image.removeAttribute("data-src");
  };
}

function loadImages(deadline) {
  while (deadline.timeRemaining() > 0 && images.length > 0) {
    preloadImage(images[0]);
    images.shift(); // 移除已加载的图片
  }

  if (images.length > 0) {
    requestIdleCallback(loadImages, { timeout: 1000 });
  }
}

requestIdleCallback(loadImages, { timeout: 1000 });

代码解释：

我们首先获取所有带有 data-src 属性的 img 元素。这些图片是需要延迟加载的。
preloadImage 函数用于加载图片。它会将 data-src 属性的值赋给 src 属性，并移除 data-src 属性。
loadImages 函数是 requestIdleCallback 的回调函数。它会循环遍历 images 数组，并调用 preloadImage 函数来加载图片。
在 loadImages 函数中，我们使用 while 循环，只要还有空闲时间，并且还有图片没加载，就一直执行 preloadImage 函数。
如果还有图片没加载，我们就重新调用 requestIdleCallback 函数，继续安排任务。

八、requestAnimationFrame vs requestIdleCallback：（时间管理，各有千秋）

很多同学可能会把 requestAnimationFrame 和 requestIdleCallback 搞混。它们都是用于优化性能的 API，但它们的适用场景是不同的。

特性	`requestAnimationFrame`	`requestIdleCallback`
优先级	高	低
执行时机	在浏览器准备重新渲染页面之前执行（通常是每秒 60 次）	在浏览器空闲时执行
适用场景	动画、平滑滚动、用户交互等需要流畅性能的任务	数据分析、预加载、更新不重要的UI元素等可以延迟执行的任务
对用户体验的影响	保证动画的流畅性，避免卡顿	避免阻塞主线程，提高应用的响应速度

简单来说：

requestAnimationFrame 专注于保证动画的流畅性，它的任务是必须要完成的，优先级很高。
requestIdleCallback 专注于避免阻塞主线程，它的任务是可有可无的，优先级很低。

九、总结：（摸鱼也要讲究方法！）

requestIdleCallback 是一个非常有用的 API，它可以让你利用浏览器空闲时间来执行任务，从而避免阻塞主线程，保证用户体验的流畅性。但在使用 requestIdleCallback 时，需要注意一些事项，比如不要执行耗时太长的任务，不要依赖于任务的执行顺序，合理设置 timeout 属性，等等。

希望今天的讲座能帮助大家更好地理解和使用 requestIdleCallback。记住，摸鱼也要讲究方法，才能摸得高效，摸得有价值！

今天就到这里，下次有机会再跟大家聊聊其他有趣的技术话题！

发表回复 取消回复

发表回复取消回复