17370845950

JavaScript事件循环中，宏任务执行完后必须清空整个微任务队列才进入下一轮宏任务；queueMicrotask比Promise.then更轻量且语义明确，适用于同步代码后立即异步执行，但不触发渲染；requestAnimationFrame才是读取布局信息的正确时机。

JavaScript事件循环的核心机制：宏任务和微任务的调度顺序

JavaScript是单线程语言，事件循环（Event Loop）不是“轮询”，而是按严格优先级分阶段执行任务。关键在于区分两类队列：macrotask（如 setTimeout、setInterval、I/O、UI渲染）和 microtask（如 Promise.then、queueMicrotask、MutationObserver）。每次宏任务执行完后，**必须清空整个微任务队列**，才会进入下一轮宏任务。

这意味着：

• Promise.resolve().then() 总比 setTimeout(() => {}, 0) 先执行，哪怕后者时间设为 0
• queueMicrotask 和 Promise.then 在同一轮微任务中，但前者不创建 Promise 对象，开销略小
• 浏览器在每次宏任务（如一次点击回调）结束后，会强制进行一次 UI 渲染（除非被 requestIdleCallback 或节流干预）

用 queueMicrotask 替代 setTimeout(..., 0) 做异步“让出”控制权

当你需要把一段逻辑推迟到当前同步代码之后、但又不想等到下一个宏任务周期（比如避免 UI 卡顿或保证 DOM 更新可见），queueMicrotask 是更精准的选择。它比 Promise.then 更轻量，且语义更明确——就是“等这次同步栈清空后立刻执行”。

function renderLargeList(items) {
  const container = document.getElementById('list');
  items.forEach((item, i) => {
    const el = document.createElement('div');
    el.textContent = item;
    container.appendChild(el);

    // 每处理 20 项，让出主线程，避免阻塞渲染
    if ((i + 1) % 20 === 0) {
      queueMicrotask(() => {});
    }
  });
}

注意：queueMicrotask(() => {}) 不会立即触发重排/重绘，但它确保了浏览器有机会在下一批元素插入前完成上一批的样式计算与布局——这比 setTimeout(..., 0) 更可控。

常见误用：

• 在循环中反复调用 queueMicrotask 处理大量数据 → 微任务队列爆炸，反而卡死主线程
• 期望 queueMicrotask 触发 DOM 渲染 → 它不触发渲染，渲染只发生在宏任务之间

避免微任务“无限嵌套”导致的饥饿问题

微任务会在每次宏任务后被清空，但如果每个微任务又自己调度一个新的微任务，就可能形成无限链，阻塞后续宏任务（包括用户输入、定时器、网络响应），表现为页面完全无响应。

let count = 0;
function runaway() {
  if (count < 1000) {
    count++;
    queueMicrotask(runaway); // ❌ 错误：没有中断条件或延迟
  }
}
queueMicrotask(runaway);

正确做法是引入节流或降级为宏任务：

• 用 setTimeout 控制节奏（每轮只处理一部分）
• 结合 requestIdleCallback 在浏览器空闲时处理（兼容性需检查）
• 对高频率触发的逻辑（如输入框实时校验），用防抖或 input 事件 + queueMicrotask 组合，而非在每次输入都推微任务

异步代码优化的关键判断点：你到底需要“稍后”还是“下一帧”？

很多性能问题源于混淆了时间粒度：

• “稍后执行”（不阻塞当前逻辑，但不必等待渲染）→ 用 queueMicrotask 或 Promise.resolve().then()
• “下一帧开始前执行”（确保 DOM 已更新、样式已计算，再读取 offsetHeight 等）→ 用 requestAnimationFrame
• “下一帧渲染后执行”（比如动画结束后的清理）→ 用 requestAnimationFrame + setTimeout 或 Promise 配合 getComputedStyle 检测

例如，要安全读取刚插入 DOM 的元素尺寸：

el.style.display = 'block';
document.body.appendChild(el);
// ✅ 正确：等样式应用 + 布局完成后再读
requestAnimationFrame(() => {
  requestAnimationFrame(() => {
    console.log(el.offsetHeight); // 此时 layout 已触发
  });
});

微任务无法保证 layout 完成；requestAnimationFrame 回调在浏览器 layout 之后、paint 之前执行，这才是真正“下一帧”的锚点。

最容易被忽略的是：即使用了 await Promise.resolve()，也不能替代 requestAnimationFrame 来读取布局信息——因为 Promise 不参与渲染管线。