JavaScript 事件循环中宏任务与微任务的执行顺序说明

在 JavaScript 中，代码的执行并不是完全按照书写顺序进行的。 事件循环（Event Loop）机制决定了同步代码、宏任务和微任务的实际执行顺序。理解宏任务与微任务的调度规则，有助于正确判断异步代码的执行时机。

一、事件循环的基本结构

JavaScript 的执行过程可以简化为以下几个部分：

1. 调用栈（Call Stack）
2. 宏任务队列（Macro Task Queue）
3. 微任务队列（Micro Task Queue）

事件循环的核心职责是： 在合适的时机，将任务队列中的任务放入调用栈执行。

二、宏任务（Macro Task）的定义

宏任务是由宿主环境（如浏览器、Node.js）调度的任务，常见的宏任务包括：

• setTimeout
• setInterval
• setImmediate（Node.js）
• I/O 操作
• UI 渲染（浏览器）

示例：

setTimeout(() => {
  console.log('macro task');
}, 0);

宏任务会进入宏任务队列，等待事件循环调度。

三、微任务（Micro Task）的定义

微任务是由 JavaScript 引擎自身调度的任务，常见的微任务包括：

• Promise.then / catch / finally
• queueMicrotask
• MutationObserver（浏览器）

示例：

Promise.resolve().then(() => {
  console.log('micro task');
});

微任务会进入微任务队列，其优先级高于宏任务。

四、事件循环的执行顺序

在一次完整的事件循环中，执行顺序可以概括为：

1. 执行当前调用栈中的同步代码
2. 清空微任务队列
3. 执行一个宏任务
4. 再次清空微任务队列
5. 重复上述过程

关键点在于：

每执行完一个宏任务，都会立即清空当前所有微任务。

五、示例分析

示例代码如下：

console.log('start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise');
});

console.log('end');

执行顺序为：

1. start
2. end
3. promise
4. setTimeout

原因是：

• 同步代码先执行
• 微任务在宏任务之前执行
• setTimeout 属于宏任务

六、微任务队列的“清空”特性

微任务具有一个重要特性：

只要微任务队列不为空，就会一直执行，直到清空为止。

示例：

Promise.resolve().then(() => {
  console.log(1);
  Promise.resolve().then(() => {
    console.log(2);
  });
});

输出顺序为：

1
2

后创建的微任务会被追加到当前微任务队列中，并在同一轮循环中执行。

七、宏任务与微任务的对比总结

八、理解执行顺序的意义

正确理解宏任务与微任务的执行顺序，有助于：

• 判断异步代码的执行时机
• 避免错误的执行顺序假设
• 编写可预期的异步逻辑

事件循环并不是“并发执行”，而是通过任务队列实现的有序调度机制。