JavaScript微任务与宏任务详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript中的微任务（Microtask）和宏任务（Macrotask）是事件循环（Event Loop）机制中的核心概念，它们决定了代码的执行顺序。理解它们有助于开发者更好地控制程序流程，避免潜在的性能问题。一、什么是宏任务？宏任务是指那些需要较长时间才能完成的任务，通常由浏览器的主进程处理。常见的宏任务包括：setTimeoutsetIntervalsetImmediate（Node.js）requestAnimationFrame用户交互事件（如点击、滚动等）这些任务会被放入宏任务队列中，等待浏览器主线程空闲时执行。二、什么是微任务？微任务是那些可以快速完成的任务，通常在当前宏任务执行完成后立即执行。微任务具有更高的优先级，会在下一个宏任务开始前执行。常见的微任务包括：Promise.then() / Promise.catch()queueMicrotask()MutationObserverprocess.nextTick（Node.js）微任务被放入微任务队列中，一旦当前宏任务执行完毕，就会优先处理所有微任务。三、事件循环的工作流程事件循环是 JavaScript 运行的核心机制，它负责协调宏任务和微任务的执行。其基本流程如下：执行一个宏任务（例如：全局脚本、setTimeout》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

微任务常见来源包括Promise.then()/catch()/finally()、MutationObserver回调、queueMicrotask()及await后续代码；宏任务包括setTimeout/setInterval、I/O回调、UI渲染、postMessage等。

JavaScript 的微任务和宏任务不是两种“任务类型”，而是事件循环中两类不同优先级的回调队列。微任务总在当前同步代码执行完后、下一次宏任务开始前清空；宏任务则按顺序逐个从任务队列中取出执行。

微任务（Microtask）有哪些常见来源？

微任务由语言规范定义，触发后会被推入微任务队列，等当前调用栈清空后立即执行，且**必须一次性全部执行完**，中间不会插入任何渲染或宏任务。

• Promise.then() / .catch() / .finally() 的回调函数
• MutationObserver 的回调
• queueMicrotask() 显式调度的函数
• await 后续代码（本质是 Promise 链的微任务）

注意：Promise.resolve().then(...) 和 queueMicrotask(...) 是最直接、最可控的微任务入口；async/await 会隐式生成微任务，但堆栈更长，调试时容易误判执行时机。

宏任务（Macrotask）包括哪些典型操作？

宏任务代表一次完整的事件循环迭代起点，每次只取一个执行。它们之间天然存在“间隙”，浏览器可能在此间隙进行 UI 渲染、响应用户输入或执行其他宿主任务。

• setTimeout(fn, 0) / setInterval(fn, 0)
• setImmediate()（仅 Node.js，已废弃）
• I/O 回调（Node.js 中的文件读写、网络请求完成）
• UI 渲染（浏览器中的一帧更新，属于隐式宏任务）
• postMessage 和 MessageChannel 的消息处理

关键点：setTimeout(fn, 0) 并不等于“立刻执行”，它只是尽快把 fn 推入宏任务队列——实际执行要等当前宏任务 + 所有微任务都完成后，才轮到它。

微任务与宏任务的嵌套执行顺序怎么验证？

下面这段代码能清晰暴露事件循环的分层结构：

console.log(1);

setTimeout(() => console.log(2), 0);

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => {
  console.log(4);
  setTimeout(() => console.log(5), 0);
});

console.log(6);

输出顺序是：1 → 6 → 3 → 4 → 2 → 5。解释如下：

• 同步代码先输出 1 和 6
• 接着清空微任务队列：两个 Promise.then 回调依次执行，输出 3 和 4
• 4 中的 setTimeout 是新的宏任务，被推入宏任务队列末尾
• 当前宏任务结束，开始下一轮：取出第一个宏任务（即最早那个 setTimeout），输出 2
• 再下一轮：取出第二个 setTimeout，输出 5

这个顺序不可靠地依赖“时间戳”或“执行快慢”，只取决于事件循环的排队规则。

为什么 await 不是微任务“开关”，而是一种语法糖？

await 本身不创建微任务，但它会让后续代码包裹进 Promise.then，从而进入微任务队列。例如：

async function f() {
  console.log('a');
  await Promise.resolve();
  console.log('b');
}
f();

等价于：

function f() {
  console.log('a');
  return Promise.resolve().then(() => {
    console.log('b');
  });
}

所以 b 总在所有同步代码和当前微任务之后执行。但要注意：如果 await 的是未 fulfilled 的 Promise，那 console.log('b') 就不会立即进入微任务队列，而是等到该 Promise settle 后才被调度——这正是异步流程控制的关键机制，也常被误认为“await 阻塞了微任务”。

真正容易被忽略的是：微任务队列没有“深度限制”，无限递归调用 queueMicrotask 或链式 Promise.then 会导致主线程无法交还控制权，页面卡死——它比 setTimeout 更危险，因为浏览器无法在微任务中间插入渲染或中断。

终于介绍完啦！小伙伴们，这篇关于《JavaScript微任务与宏任务详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！