微任务与宏任务的事件循环机制

微任务与宏任务的事件循环机制

事件循环（Event Loop）是 JavaScript 中一个非常核心的机制，它决定了代码是如何执行的，特别是在处理异步操作时，比如 setTimeout、Promise、async/await 等。下面我们来 详细 讲解一下宏任务（Macro Task）与微任务（Micro Task）的事件循环机制。

一、基本概念

1. 宏任务（Macro Task）

宏任务也叫“任务队列”或“主任务”，包括以下常见的操作：

• setTimeout

• setInterval

• setImmediate（Node.js）

• requestAnimationFrame

• I/O 操作（如文件读取、网络请求等）

• 每个宏任务执行完毕后，事件循环会查看是否有需要处理的微任务

每个宏任务执行完毕后，事件循环会查看是否有需要处理的微任务。

2. 微任务（Micro Task）

微任务是嵌套在宏任务内部的小任务，在当前宏任务执行完之后、下一个宏任务开始之前执行。常见的微任务包括：

• Promise.then/catch/finally

• MutationObserver

• queueMicrotask

二、事件循环执行机制

我们可以把事件循环的执行步骤理解成一个不断重复的循环，主要逻辑如下：

事件循环（每一轮）：
1. 执行一个宏任务（从宏任务队列中取出）
2. 执行所有微任务（清空微任务队列）
3. 渲染（如果需要）
4. 进入下一轮事件循环

重要原则：

• 每个宏任务执行后，都会清空所有当前的微任务队列。
• 微任务优先级高于宏任务，但不会打断正在执行的同步代码或当前宏任务

三、代码示例详解

console.log(