JavaScript 事件循环进阶：requestAnimationFrame 与 Web Workers

requestAnimationFrame（简称 rAF）是浏览器专门为动画和连续视觉更新提供的 API。它的核心特点是：在浏览器下一次重绘之前调用指定的回调函数，确保动画与屏幕刷新同步。

rAF 的基本用法

function animate() {
  // 更新动画状态
  updateAnimation();
  // 渲染当前帧
  renderFrame();
  // 请求下一帧
  requestAnimationFrame(animate);
}
// 启动动画循环
requestAnimationFrame(animate);

rAF 的优势

1. 自动匹配显示器刷新率：通常是 60Hz，保证流畅度。
2. 节能：页面不可见时自动暂停，减少 CPU/GPU 占用。
3. 性能优化：浏览器可以合并多个动画操作，减少重排重绘。
4. 时间戳支持：提供高精度时间参数，便于计算帧间隔。

rAF 的工作原理

function experimentRAF() {
  console.log('实验开始');
  let frameCount = 0;
  let lastTimestamp = 0;
  
  function frameCallback(timestamp) {
    frameCount++;
    if (lastTimestamp > 0) {
      const interval = timestamp - lastTimestamp;
      console.log(`第${frameCount}帧，间隔：${interval.toFixed(2)}ms`);
    }
    lastTimestamp = timestamp;
    if (frameCount < 10) {
      requestAnimationFrame(frameCallback);
    } else {
      console.log('实验结束，平均帧率:', (1000 / ((timestamp - startTime) / 10)).toFixed(1), 'fps');
    }
  }
  
  const startTime = performance.now();
  requestAnimationFrame(frameCallback);
}

这里的关键点在于 frameCallback() 回调中的 timestamp 参数。这个值来自 performance.now()，表示回调开始执行的时间，精度远高于 Date.now()。

rAF 在事件循环中的位置

为了理解 rAF 何时执行，我们可以观察以下代码的输出顺序：

setTimeout(() => {
  console.log('1. setTimeout - 宏任务');
  Promise.resolve().then(() => {
    console.log('2. setTimeout 中的微任务');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise - 微任务');
  requestAnimationFrame(() => {
    console.log('4. Promise 中注册的 rAF');
  });
});

requestAnimationFrame(() => {
  console.log('5. 直接注册的 rAF');
  setTimeout(() => {
    console.log('6. rAF 中注册的 setTimeout');
  }, 0);
});

queueMicrotask(() => {
  console.log('7. queueMicrotask - 微任务');
});

console.log('8. 同步代码');

输出顺序如下：

1. 8. 同步代码
2. 3. Promise - 微任务
3. 7. queueMicrotask - 微任务
4. 1. setTimeout - 宏任务
5. 2. setTimeout 中的微任务
6. 5. 直接注册的 rAF
7. 4. Promise 中注册的 rAF
8. 6. rAF 中注册的 setTimeout

其执行过程遵循以下流程：

1. 执行宏任务（如 setTimeout, 事件回调等）
2. 执行微任务（如 Promise, queueMicrotask 等）
3. 执行 rAF 回调（动画更新）
4. 样式计算和布局
5. 绘制（Paint）
6. 合成（Composite）
7. 检查空闲，执行 requestIdleCallback 回调

Web Workers：真正的多线程编程

什么是 Web Workers？

Web Workers 允许 JavaScript 在后台线程中运行脚本，而不会阻塞主线程。这意味着我们可以执行 CPU 密集型任务，而不会影响页面的响应性。

// 主线程代码
console.log('主线程：开始');

// 创建一个 Worker
const worker = new Worker('worker.js');

// 向 Worker 发送消息
worker.postMessage({ type: 'CALCULATE', data: { numbers: [1, 2, 3, 4, 5] } });

// 接收 Worker 的消息
worker.onmessage = (event) => {
  const result = event.data;
  console.log('主线程：收到 Worker 结果', result);
  document.getElementById('result').textContent = `结果：${result}`;
};

// 处理 Worker 错误
worker.onerror = (error) => {
  console.error('Worker 错误:', error);
};

console.log('主线程：继续执行其他任务...');

Worker 的限制

虽然强大，但 Worker 并非万能，主要限制包括：

1. 无法访问 DOM：不能操作页面元素。
2. 环境隔离：无法使用 window, document 等全局对象。
3. 网络限制：不能执行同步的 XHR（可以使用 fetch），受同源策略限制。
4. 文件协议：通常不能加载本地文件（file:// 协议）。

Web Workers 的类型

1. 专用 Worker (Dedicated Worker)

只能被创建它的脚本使用，是最常用的类型：

const dedicatedWorker = new Worker('dedicated-worker.js');

2. 共享 Worker (Shared Worker)

可以被多个脚本共享（需同源），适合跨标签页通信：

if (window.SharedWorker) {
  const sharedWorker = new SharedWorker('shared-worker.js');
  sharedWorker.port.onmessage = (event) => {
    console.log('收到共享 Worker 消息:', event.data);
  };
  sharedWorker.port.postMessage('Hello Shared Worker');
} else {
  console.log('浏览器不支持 Shared Worker');
}

3. Service Worker

主要用于离线缓存、推送通知等，充当代理服务器：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js').then(registration => {
    console.log('Service Worker 注册成功:', registration);
  }).catch(error => {
    console.error('Service Worker 注册失败:', error);
  });
}

4. Audio Worklet (Chrome 66+)

用于高性能音频处理，替代旧的 AudioContext 节点：

if (window.audioContext && window.audioContext.audioWorklet) {
  audioContext.audioWorklet.addModule('audio-processor.js').then(() => {
    console.log('Audio Worklet 加载成功');
  });
}

5. Paint Worklet (CSS Houdini)

用于自定义 CSS 绘制，扩展样式能力：

if (CSS.paintWorklet) {
  CSS.paintWorklet.addModule('paint-worklet.js').then(() => {
    console.log('Paint Worklet 加载成功');
  });
}

requestIdleCallback：空闲期任务调度

什么是 requestIdleCallback？

requestIdleCallback（简称 rIC）允许开发者在浏览器空闲时期调度任务。这对于执行低优先级或非紧急的工作非常有用，避免影响关键的用户交互和动画。

const idleCallbackId = requestIdleCallback((deadline) => {
  console.log('空闲回调开始执行');
  // deadline 对象包含重要信息
  console.log('剩余时间:', deadline.timeRemaining(), 'ms');
  console.log('是否超时:', deadline.didTimeout);
  
  // 在空闲时间内执行任务
  while (deadline.timeRemaining() > 0 && hasMoreWork()) {
    doSomeLowPriorityWork();
  }
  
  // 如果还有工作未完成，再次安排
  if (hasMoreWork()) {
    requestIdleCallback(processLowPriorityWork);
  }
  console.log('空闲回调结束');
}, { timeout: 1000 }); // 设置超时，确保在 1 秒内执行

// 主线程继续执行其他任务
console.log('主线程继续执行...');

rIC 的关键特点

1. 只在浏览器空闲时执行：不影响用户交互。
2. 提供 deadline 对象：包含剩余时间和超时信息，方便控制任务粒度。
3. 可设置 timeout：确保任务最终能执行，避免无限等待。
4. 适合低优先级任务：如日志上报、非关键数据预加载。

rIC 在事件循环中的位置

// 理解 rIC 的执行时机
console.log('=== 事件循环中各 API 的执行时机 ===');

setTimeout(() => {
  console.log('1. setTimeout - 宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('2. Promise - 微任务');
});

requestAnimationFrame(() => {
  console.log('3. requestAnimationFrame - 动画帧回调');
  requestIdleCallback(() => {
    console.log('5. rAF 中安排的 rIC - 空闲回调');
  }, { timeout: 100 });
});

requestIdleCallback(() => {
  console.log('4. 直接安排的 rIC - 空闲回调');
  Promise.resolve().then(() => {
    console.log('6. rIC 中的 Promise - 微任务');
  });
}, { timeout: 100 });

queueMicrotask(() => {
  console.log('7. queueMicrotask - 微任务');
});

console.log('8. 同步代码');

输出顺序如下：

1. 8. 同步代码
2. 2. Promise - 微任务
3. 7. queueMicrotask - 微任务
4. 1. setTimeout - 宏任务
5. 3. requestAnimationFrame - 动画帧回调
6. 4. 直接安排的 rIC - 空闲回调
7. 6. rIC 中的 Promise - 微任务
8. 5. rAF 中安排的 rIC - 空闲回调

执行流程总结：

1. 执行宏任务
2. 执行微任务
3. 执行 rAF 回调
4. 样式计算和布局
5. 绘制与合成
6. 检查空闲时间，如果有空闲则执行 rIC 回调；否则等待下一帧。

核心概念总结

requestAnimationFrame (rAF)

• 是什么：浏览器提供的动画 API，在每次重绘前执行回调。
• 为什么用：自动匹配显示器刷新率，页面不可见时暂停，节省资源。
• 最佳时机：视觉更新、动画、连续状态变化。
• 执行位置：在微任务之后，重绘之前。

Web Workers

• 是什么：允许 JavaScript 在后台线程运行的技术。
• 为什么用：执行 CPU 密集型任务而不阻塞主线程。
• 限制：无法访问 DOM，通过消息传递通信。
• 类型：专用 Worker、共享 Worker、Service Worker 等。

requestIdleCallback (rIC)

• 是什么：在浏览器空闲时调度任务的 API。
• 为什么用：执行低优先级、非紧急任务。
• 关键对象：deadline 包含剩余时间和超时信息。
• 执行位置：在一帧的最后，如果有空闲时间。

结语

本文探讨了 requestAnimationFrame、Web Workers 以及 requestIdleCallback 的基本用法和对比。掌握这些工具在事件循环中的位置，能帮助我们在单线程模型下构建出更流畅、响应更快的 Web 应用。