如何理解JavaScript中的微任务与宏任务队列？

宏任务是事件循环中的任务单元，如script、setTimeout、setInterval、I/O和UI渲染，每次执行完一个宏任务后会执行所有微任务；微任务如Promise回调、queueMicrotask、MutationObserver具有更高优先级，在当前宏任务结束后立即执行。执行顺序为：同步代码 → 微任务 → 下一个宏任务。例如console.log('1')、setTimeout(() => console.log('2'), 0)、Promise.resolve().then(() => console.log('3'))、console.log('4')的输出结果是1 → 4 → 3 → 2，因'1'和'4'为同步代码先执行，Promise.then为微任务在宏任务结束后执行，setTimeout为宏任务最后执行。事件循环流程为：执行全局脚本（宏任务）→ 遇异步操作注册到对应队列→ 宏任务结束执行所有微任务→ 清空微任务后进入下一宏任务。微任务在宏任务间“插队”且全部执行完才继续下一宏任务，确保异步逻辑尽快响应。

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的处理。理解微任务与宏任务队列，关键在于搞清楚不同异步任务的执行优先级和执行时机。

宏任务（Macrotask）是什么？

宏任务是事件循环中的一类任务单元，每次执行完一个宏任务后，会检查并执行所有可用的微任务。常见的宏任务包括：

• 整体脚本代码（script）
• setTimeout 回调
• setInterval 回调
• I/O 操作
• UI 渲染

每个宏任务在事件循环中被依次执行，中间穿插微任务的处理。

微任务（Microtask）又是什么？

微任务在当前宏任务执行结束后、下一个宏任务开始前立即执行。它们具有更高的优先级。常见的微任务有：

立即学习“Java免费学习笔记（深入）”；

• Promise 的 .then、.catch、.finally 回调
• queueMicrotask() 函数添加的任务
• MutationObserver 回调（DOM 变动监听）

一旦一个宏任务执行完成，JavaScript 引擎会清空整个微任务队列，把所有微任务执行完，才进入下一个宏任务。

执行顺序的实际例子

看一段代码来直观感受执行顺序：

腾讯小微

基于微信AI智能对话系统打造的智能语音助手解决方案

26

查看详情

输出结果是：1 → 4 → 3 → 2

解释过程：

• '1' 和 '4' 是同步代码，直接输出
• setTimeout 是宏任务，放入宏任务队列等待
• Promise.then 是微任务，在当前宏任务结束后立即执行
• 所以先输出 '3'，再从宏任务队列取出 '2' 输出

事件循环如何协调两者？

事件循环的基本流程如下：

• 执行全局脚本，这是一个宏任务
• 执行过程中遇到异步操作，将其回调注册到对应的队列（宏或微）
• 当前宏任务执行完毕，立即执行所有排队的微任务
• 微任务清空后，进入下一个宏任务，重复上述过程

这个机制保证了像 Promise 这样的异步逻辑能尽快响应，而不必等到下一轮事件循环。

基本上就这些。掌握微任务和宏任务的区别，关键是记住：微任务在宏任务之间“插队”，而且会全部执行完才继续下一个宏任务。这在处理异步逻辑、避免界面卡顿等方面非常关键。

以上就是如何理解JavaScript中的微任务与宏任务队列？的详细内容，更多请关注php中文网其它相关文章！