JavaScript宏任务与微任务全解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript宏任务与微任务详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

宏任务和微任务决定JavaScript异步执行顺序：宏任务每次执行一个，结束后清空全部已就绪微任务；微任务优先级更高，按入队顺序连续执行至为空。

宏任务和微任务是 JavaScript 事件循环（Event Loop）中的两类异步任务，它们决定了代码的执行时机和顺序。简单说：宏任务一次只执行一个，执行完后会清空所有当前已就绪的微任务；微任务则在每次宏任务结束后、渲染前集中执行，且会一直执行到微任务队列为空。

宏任务有哪些

宏任务由宿主环境（浏览器或 Node.js）提供，每次从宏任务队列中取出一个执行。常见宏任务包括：

• 全局脚本（同步代码）本身就是一个宏任务
• setTimeout / setInterval
• setImmediate（Node.js 独有）
• I/O 操作、UI 渲染（浏览器中）、用户交互事件（如 click）

微任务有哪些

微任务优先级更高，在每个宏任务结束后立即执行，且不中断。常见微任务包括：

• Promise.then/catch/finally 的回调（注意：new Promise(fn) 中的 fn 是同步执行的）
• queueMicrotask()
• MutationObserver 回调
• Object.observe 已废弃，不用管

执行顺序规则

事件循环按如下节奏运行：

• 执行一个宏任务（如 script、setTimeout 回调）
• 执行过程中遇到微任务（如 Promise.then），将其加入微任务队列
• 宏任务执行完，立即执行所有当前微任务（按入队顺序，且新加入的也会被执行，直到队列为空）
• 执行 UI 渲染（浏览器中，可选，若需更新界面）
• 取下一个宏任务，重复上述流程

例如这段代码：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出顺序是：1 → 4 → 3 → 2。因为 1 和 4 是同步宏任务；3 是微任务，紧接在第一轮宏任务后执行；2 是下一轮宏任务，排在最后。

基本上就这些。理解宏微任务的关键不是死记类型，而是抓住“宏任务之间夹着一整轮微任务”这个节奏。它直接影响异步逻辑的时序，比如 Vue 的 nextTick、React 的 setState 批量更新，底层都依赖微任务机制。

今天关于《JavaScript宏任务与微任务全解析》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！