JavaScript事件循环_宏任务与微任务深度解析

JavaScript通过事件循环实现异步，宏任务执行后立即清空微任务队列，微任务优先级高于宏任务，如console.log('1')、setTimeout、Promise.then混合执行时输出1→4→3→2。

JavaScript 是单线程语言，依靠事件循环（Event Loop）实现异步操作的调度。理解宏任务（MacroTask）与微任务（MicroTask）是掌握事件循环机制的关键。下面深入解析它们的执行顺序和实际影响。

宏任务与微任务的基本概念

在 JavaScript 中，任务被分为两类：宏任务和微任务。

宏任务包括：

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

微任务包括：

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

• Promise.then/catch/finally 回调
• MutationObserver 回调
• queueMicrotask()
• process.nextTick()（Node.js 环境）

每次事件循环中，主线程执行完当前宏任务后，会清空所有可用的微任务队列，然后再执行下一个宏任务。

事件循环的执行流程

事件循环遵循以下步骤：

• 从宏任务队列中取出一个任务执行
• 执行过程中遇到微任务，将其加入微任务队列
• 当前宏任务执行完毕后，立即执行微任务队列中的所有任务
• 微任务清空后，进行 UI 渲染（如有需要），然后开始下一轮循环

这意味着微任务总是在当前宏任务结束后、下一个宏任务开始前被执行，且具有更高的优先级。

典型代码示例分析

看下面这段代码：

必应图像创建器

微软必应出品的AI绘图工具

593

查看详情

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

解释：

• '1' 和 '4' 是同步代码，直接输出
• setTimeout 属于宏任务，进入宏任务队列
• Promise.then 是微任务，进入微任务队列
• 当前宏任务（整体 script）执行完后，先执行微任务 '3'
• 下一轮事件循环再执行宏任务 '2'

微任务的连续触发与性能影响

微任务会在当前宏任务结束后立即全部执行，这可能导致一些意外情况。

例如递归使用 queueMicrotask 或 Promise：

输出：micro 1 → micro 2 → micro 3，全部在一次宏任务后完成。

这种模式会阻塞主线程，直到所有微任务执行完毕，期间无法响应用户交互或渲染页面。

基本上就这些。宏任务和微任务的协作构成了 JavaScript 异步执行的核心机制，正确理解它们有助于写出更可靠、可预测的异步代码。

以上就是JavaScript事件循环_宏任务与微任务深度解析的详细内容，更多请关注php中文网其它相关文章！