前端 / 技术 · 2025年5月5日 0

为什么要区分宏任务和微任务?它们的执行优先级是什么?

🧠 为什么要区分宏任务(Macro Task)和微任务(Micro Task)?

这是为了更好地控制 JavaScript 的执行顺序和响应性能,尤其是在处理异步代码时:

  • 微任务:用于保证某些操作在当前宏任务结束前立即执行(如 Promise.then())。
  • 宏任务:系统调度的主循环单位(如 setTimeout()setInterval()、事件处理)。

👉 简单说:微任务是“紧急的小事”,宏任务是“下一轮大事”


📊 执行优先级顺序(事件循环模型)

  1. 执行一个 宏任务(如主线程代码或 setTimeout 回调)
  2. 执行所有产生的 微任务(如 Promise.then()queueMicrotask()
  3. 渲染更新(如 DOM 改动)
  4. 开始下一轮宏任务

✅ 举个例子:

console.log('start');

setTimeout(() => {
  console.log('macro task');
});

Promise.resolve().then(() => {
  console.log('micro task');
});

console.log('end');

输出顺序:

start
end
micro task     // 微任务优先
macro task     // 宏任务之后

📦 总结

类型 示例 何时执行
微任务 Promise.then()queueMicrotask() 当前宏任务结束后,立刻执行所有
宏任务 setTimeout()、事件监听回调 每一轮事件循环的起点