JavaScript事件循环_宏任务与微任务

JavaScript通过事件循环处理异步，先执行同步代码，再按“宏任务→清空微任务→渲染→下一宏任务”顺序循环；微任务如Promise回调在当前宏任务后立即执行，优先级高于setTimeout等宏任务。

JavaScript 是单线程语言，通过事件循环（Event Loop）实现异步操作的处理。理解宏任务（Macro Task）与微任务（Micro Task）是掌握异步执行顺序的关键。

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

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

宏任务包括：

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

微任务包括：

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

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

事件循环的执行流程

每次事件循环开始时，会先执行同步代码。之后，按照以下顺序处理异步任务：

• 执行一个宏任务（例如 script 主线程代码）
• 执行该宏任务中产生的所有可执行微任务
• 进行 UI 渲染（如果需要）
• 进入下一个宏任务，重复上述过程

关键点在于：每轮事件循环中，**只取一个宏任务执行，但会清空当前所有的微任务队列**。

天工AI

昆仑万维推出的国内首款融入大语言模型的AI对话问答、AI搜索引擎，知识从这里开始。

400

查看详情

常见执行顺序示例

看下面这段代码：

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

原因分析：

• '1' 和 '4' 是同步代码，最先输出
• setTimeout 是宏任务，进入宏任务队列
• Promise.then 是微任务，在当前宏任务结束后立即执行
• 所以先输出 '3'，再进入下一轮宏任务执行 setTimeout

微任务的优先级高于宏任务

微任务会在当前宏任务结束后、下一轮宏任务开始前全部执行完毕。这意味着微任务具有更高的响应优先级，适合用于需要快速响应的操作，比如 Promise 的链式调用。

例如，在 Vue 或 React 的响应式更新中，也利用了微任务机制来批量异步更新视图，保证性能和一致性。

基本上就这些。掌握宏任务与微任务的执行顺序，能帮助你更好理解异步代码的运行逻辑，避免出现意料之外的行为。不复杂但容易忽略。

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