📌 摘要

不是所有任务都需要“马上做”，有些可以“等你空了再说”。requestIdleCallback（rIC）是浏览器提供的空闲调度机制，专为低优先级任务设计。本课将深入讲解 rIC 的原理、使用方式、超时兜底策略、任务切片技巧、与指标监控方法，并展示如何在 AI 模型预加载、日志上报、缓存清理等场景中实现“丝滑后台执行”。

---

🔑 关键词

• requestIdleCallback
• 空闲调度
• 超时兜底
• 切片执行
• 后台任务优化

---

🧠 为什么需要空闲调度机制

• 主线程资源宝贵：动画、交互、渲染都在主线程上跑，低优先级任务不应抢占资源。
• 用户体验优先：后台任务不应影响点击响应、滚动流畅度。
• AI 应用场景：模型预加载、权重切片、缓存清理等任务可以“等空了再做”。

---

🔍 requestIdleCallback 是什么

• 定义：浏览器在主线程空闲时调用你注册的回调函数。
• 特点：
  • 提供 deadline.timeRemaining()，表示剩余空闲时间（单位：ms）。
  • 可设置 timeout，确保任务最终执行。
  • 在高负载时可能长时间不触发。

---

🧪 基本用法

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task();
  }
}, { timeout: 2000 });

• 解释：
  • deadline.timeRemaining()：剩余时间，通常 < 50ms。
  • timeout：即使没有空闲，也会在超时后强制执行。

---

🧰 工程化封装：带兜底的切片执行器

function runIdleTasks(tasks, { timeout = 2000 } = {}) {
  let index = 0;
  const total = tasks.length;

  function runner(deadline) {
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && index < total) {
      tasks[index++]();
    }
    if (index < total) {
      requestIdleCallback(runner, { timeout });
    }
  }

  requestIdleCallback(runner, { timeout });
}

• 优势：
  • 自动切片执行，避免长任务阻塞。
  • 超时兜底，保证任务最终完成。
  • 可扩展为任务队列、优先级调度器。

---

🧩 使用场景与实践

场景	描述	推荐策略
AI 模型预加载	页面初始化时加载小模型或权重切片	rIC + timeout，空闲加载，超时兜底
日志上报	用户行为日志、性能指标	rIC + 批处理，避免频繁 IO
缓存清理	清理 localStorage、IndexedDB 旧数据	rIC + 分批执行
DOM 预构建	构建隐藏 DOM 节点（如弹窗）	rIC + visibility 触发
预取资源	图片、脚本、字体等	rIC + fetch + 优先级控制

---

📊 指标监控与调度优化

1) 空闲触发率

• 定义：任务是否在 didTimeout 前完成。
• 目标：尽量在空闲时间完成，减少强制执行。

2) 平均执行时间

• 定义：每次 rIC 回调内任务耗时。
• 目标：控制在 10–20ms 内，避免影响主线程。

3) 剩余时间利用率

• 定义：timeRemaining() 的使用比例。
• 目标：提升利用率，避免空闲浪费。

---

🧠 与其它机制的协同

机制	协同方式	说明
setTimeout	超时兜底	rIC 不触发时保证任务执行
requestAnimationFrame	渲染任务分离	rAF 负责视觉，rIC 负责后台
Web Workers	重任务卸载	rIC 触发 Worker 任务，主线程轻渲染
Intersection Observer	触发时机控制	元素进入视口后再用 rIC 执行任务

---

🧪 实战：AI 模型预加载器

function preloadModel(url, { timeout = 3000 } = {}) {
  let done = false;

  function load() {
    if (done) return;
    fetch(url).then(res => res.arrayBuffer()).then(buffer => {
      // 模型加载逻辑
      done = true;
    });
  }

  requestIdleCallback((deadline) => {
    if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
      load();
    }
  }, { timeout });

  // 兜底
  setTimeout(() => { if (!done) load(); }, timeout + 500);
}

• 特点：
  • 空闲加载优先，超时兜底保障。
  • 可扩展为多个模型并行预加载。

---

⚠️ 常见误区与修正

误区	修正
rIC 是定时器	❌ 它是调度器，依赖主线程空闲
rIC 一定会触发	❌ 高负载下可能长时间不触发，需 timeout
rIC 可做重任务	❌ 应做轻量任务，重任务用 Worker
rIC 可替代 rAF	❌ rAF 用于视觉同步，rIC 用于后台任务

---

🧪 小练习

1. 实现一个 rIC 执行器，加载 100 个小任务，每次最多执行 5 个，记录总耗时。
2. 模拟高负载（如同步循环 200ms），观察 rIC 是否触发、是否超时。
3. 将 AI 模型加载逻辑改为 rIC + timeout，对比页面响应速度与加载成功率。
4. 结合 Intersection Observer，仅在元素进入视口时触发 rIC 任务。

---

🔮 下一课预告

下一课《多线程的强心剂：Web Workers 的计算卸载与主线程协同》，我们将深入讲解如何将重任务（如 AI 推理、加密计算、图像处理）移出主线程，构建稳定、高性能的前端架构。