JavaScript事件循环与微任务详解

**JavaScript 事件循环与微任务执行解析：深入理解异步编程机制** JavaScript 作为单线程语言，通过事件循环机制处理异步操作。本文深入解析 JavaScript 事件循环的工作原理，重点剖析宏任务与微任务的区别及其执行顺序。事件循环优先执行同步代码，随后处理微任务队列，最后执行宏任务，且每完成一个宏任务，都会清空当前的微任务队列。例如，`console.log` 和 `Promise.then` 分别代表同步任务和微任务，而 `setTimeout` 则是宏任务。此外，文章还阐述了微任务队列的“即时性”特点以及嵌套微任务的处理方式，强调微任务的高优先级和可预测性。掌握事件循环和微任务机制，是理解 JavaScript 异步编程行为、避免潜在陷阱的关键。

事件循环先执行同步代码，再处理微任务队列，最后执行宏任务；每完成一个宏任务，都会清空当前微任务队列。例如，console.log('1')和'4'为同步任务，Promise.then为微任务，setTimeout为宏任务，因此输出顺序为1→4→3→2。微任务具有高优先级，可在当前循环内立即执行，包括嵌套的微任务，如a→c→b所示，确保异步操作的可预测性。

JavaScript 引擎执行事件循环和微任务队列的机制，是理解异步编程行为的关键。它不是简单地按顺序执行代码，而是通过一套协调机制来调度同步任务、异步回调、微任务和宏任务。

事件循环的基本结构

JavaScript 是单线程语言，所有代码都在一个主线程上执行。为了处理异步操作（如定时器、网络请求、DOM 事件），引擎引入了事件循环（Event Loop）。它的核心逻辑是：

• 先执行当前调用栈中的同步代码
• 当同步代码执行完毕后，检查微任务队列
• 执行完所有微任务后，进入下一轮事件循环，可能执行一个宏任务（如 setTimeout 回调）

每一次“宏任务”执行完成后，都会清空当时的微任务队列。

宏任务与微任务的区别

任务被分为两类：宏任务（macrotask）和微任务（microtask），它们在事件循环中的执行时机不同。

宏任务包括：

• script 整体代码
• setTimeout/setInterval 回调
• I/O 操作
• UI 渲染（浏览器环境）
• setImmediate（Node.js）

微任务包括：

• Promise.then/catch/finally 的回调
• MutationObserver（浏览器）
• queueMicrotask()
• process.nextTick（Node.js，优先级更高）

关键点是：每完成一个宏任务后，会立即执行所有当前可用的微任务，直到微任务队列为空，才进行下一个宏任务。

微任务队列如何被处理

微任务队列的特点是“即时性”。一旦有微任务被加入队列（比如 Promise 被 resolve），它不会等到下一轮事件循环，而是在当前任务结束后立即执行。

示例帮助理解：

输出顺序是：1 → 4 → 3 → 2

解释：

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

嵌套微任务的处理方式

微任务可以继续创建新的微任务，这些也会被追加到队列末尾并被执行，直到队列清空。

例如：

输出为：a → c → b

原因：

• 第一个 .then 加入微任务队列
• 执行时输出 'a'，并添加一个新的微任务（输出 'b'）
• 之后轮到第二个 .then，输出 'c'
• 此时微任务队列还未空，继续执行新加入的 'b'

这说明微任务队列是“持续清空”的过程，不是只执行初始的那一层。

基本上就这些。事件循环的设计保证了异步回调的可预测性，尤其是微任务能确保在下一个渲染或 I/O 前执行，适合做状态更新、链式异步处理等场景。理解这个机制，能避免很多异步逻辑中的陷阱。

到这里，我们也就讲完了《JavaScript事件循环与微任务详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,异步编程,事件循环,宏任务,微任务的知识点！