深入事件循环：requestAnimationFrame、requestIdleCallback、queueMicrotask 区别

事件循环中的位置：

宏任务(macro) → 微任务(micro) → requestAnimationFrame → 渲染 → requestIdleCallback

1. queueMicrotask(fn)

• 将回调添加到微任务队列
• 在当前宏任务结束后、下一个宏任务前执行
• 优先级高于 requestAnimationFrame
• 场景：Promise 的回调、状态变更后需要立即处理的逻辑

2. requestAnimationFrame(callback)

• 在浏览器下一次重绘之前执行（通常 16.6ms/60fps）
• 由浏览器管理执行时机，与垂直同步信号对齐
• 传参为高精度时间戳
• 场景：动画循环、DOM 批量更新、Canvas 渲染

function animate() {
  element.style.transform = `translateX(${x}px)`;
  x += 1;
  requestAnimationFrame(animate);
}

3. requestIdleCallback(callback)

• 在浏览器空闲时执行（渲染完成后有空余时间）
• 传参 IdleDeadline 对象（didTimeout + timeRemaining()）
• 场景：非关键任务（日志上报、数据分析、预加载）

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) {
    // 执行低优先级任务
  }
}, { timeout: 2000 }); // 最多等 2 秒

注意：requestIdleCallback 支持度有限，Safari 不支持。