深入理解 JavaScript 事件循环：宏任务与微任务的执行机制

JavaScript 是单线程语言，但它却能处理复杂的并发操作（如网络请求、定时器、用户交互），这背后的秘密武器就是 事件循环（Event Loop）。本文将深入拆解宏任务与微任务的执行逻辑，通过代码示例帮你彻底搞懂执行顺序。

TL;DR

核心机制 ：JS 引擎执行同步代码 -> 清空微任务 队列 -> 尝试 DOM 渲染 -> 执行一个宏任务 -> 清空微任务队列 -> ... 循环往复。
微任务（MicroTask） ：优先级高，在当前宏任务结束后立即执行。包括 Promise.then、process.nextTick (Node)、MutationObserver。
宏任务（MacroTask） ：优先级低，每次循环只执行一个。包括 setTimeout、setInterval、setImmediate (Node)、I/O、UI Rendering。
关键点：微任务队列总是会在下一个宏任务开始之前被清空。

1. 为什么需要事件循环？

JavaScript 的设计初衷是作为浏览器脚本语言，主要用途是与用户互动和操作 DOM。如果它是多线程的，一个线程在删除 DOM 节点，另一个线程在编辑该节点，会带来复杂的同步问题。因此，JS 选择 单线程 执行。

为了不阻塞主线程（例如等待一个 5秒的 API 请求），JS 引入了 异步非阻塞 机制，而事件循环正是协调同步代码与异步回调执行顺序的调度员。

2. 宏任务与微任务的分类

并不是所有的异步任务都是一样的。它们被分为两类队列：

微任务 (MicroTask)

通常是由代码本身产生的任务，优先级较高，需要在当前同步代码执行完后立即处理。

Promise.then / .catch / .finally
process.nextTick (Node.js 环境，优先级高于 Promise)
MutationObserver (监听 DOM 变化)
queueMicrotask API

宏任务 (MacroTask)

通常是由宿主环境（浏览器或 Node）发起的任务，每次事件循环只取一个执行。

setTimeout / setInterval
setImmediate (Node.js)
requestAnimationFrame (UI 渲染前执行，归类有些特殊，通常视为渲染阶段的一部分)
I/O 操作 (文件读写、网络请求回调)
UI Rendering (浏览器绘制)
<script> (整体代码本身算第一个宏任务)

3. 事件循环的完整流程

标准的 Event Loop 流程如下：

执行同步代码（这本身属于第一个宏任务）。
检查微任务队列 ：
- 如果队列不为空，取出队首任务执行。
- 执行过程中如果产生了新的微任务，追加到队尾，继续执行直到队列清空。
UI 渲染阶段 （浏览器视情况决定是否渲染）：
- 检查是否需要更新 UI。
- 执行 requestAnimationFrame 回调（如果在渲染前）。
执行宏任务 ：
- 从宏任务队列中取出一个任务执行。
- 执行完后，回到第 2 步（再次清空微任务）。

口诀：同步走完清微任务，渲染之后取宏任务。

4. 实战代码解析

案例一：基础顺序

javascript 复制代码

console.log('1'); // 同步

setTimeout(() => {
  console.log('2'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // 微任务
});

console.log('4'); // 同步

解析：

执行同步代码：打印 '1'，打印 '4'。
清空微任务：执行 Promise 回调，打印 '3'。
执行宏任务：执行 setTimeout 回调，打印 '2'。
结果：1 -> 4 -> 3 -> 2

案例二：微任务插队与嵌套

javascript 复制代码

console.log('Start');

setTimeout(() => {
  console.log('Timeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1'); // 微任务 1
  // 微任务中产生新的微任务
  Promise.resolve().then(() => {
    console.log('Promise 2'); // 微任务 2
  });
});

console.log('End');

解析：

同步打印 'Start', 'End'。
检查微任务队列：发现 Promise 1，执行并打印。
Promise 1 执行时注册了 Promise 2，追加到当前微任务队列尾部。
微任务队列未空，继续执行 Promise 2，打印。
微任务清空完毕，去宏任务队列取 Timeout 执行。
结果：Start -> End -> Promise 1 -> Promise 2 -> Timeout

案例三：async/await 的本质

async/await 只是 Promise 的语法糖。await 这一行右边的代码是同步执行的，await 下面的代码 相当于放在了 Promise.then 中，属于微任务。

javascript 复制代码

async function async1() {
  console.log('async1 start');
  await async2(); 
  // 下面这行相当于 .then(() => console.log('async1 end'))
  console.log('async1 end'); 
}

async function async2() {
  console.log('async2');
}

console.log('script start');

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

async1();

new Promise(function(resolve) {
  console.log('promise1'); // Promise 构造函数内是同步的
  resolve();
}).then(function() {
  console.log('promise2');
});

console.log('script end');

深度解析：

script start (同步)
setTimeout 注册宏任务。
调用 async1:
- 打印 async1 start (同步)。
- 调用 async2，打印 async2 (同步)。
- 遇到 await，将 async1 end 放入微任务队列 (微任务1)。
new Promise:
- 打印 promise1 (同步)。
- resolve() 触发 then，将 promise2 放入微任务队列 (微任务2)。
打印 script end (同步)。
同步结束，清空微任务 ：
- 执行微任务1：打印 async1 end。
- 执行微任务2：打印 promise2。
微任务空，执行宏任务 ：
- 打印 setTimeout。

结果：
script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> setTimeout

(注：旧版 Chrome 曾有 Bug 导致 async1 end 比 promise2 慢，但在现代浏览器中已符合标准，遵循入队顺序)

5. 易错点与注意事项

Promise 构造函数是同步的 ：new Promise(fn) 中的 fn 会立即执行，只有 .then 中的回调才是微任务。
微任务饿死宏任务 ：如果你在微任务中无限循环地添加新的微任务（例如递归 Promise），那么主线程会一直被占用，宏任务永远无法执行，页面会卡死（类似 while(true)）。
UI 渲染时机：通常浏览器会在清空微任务之后、执行下一个宏任务之前尝试渲染。如果微任务执行时间过长，会阻塞渲染导致掉帧。
Node.js 的差异 ：
- process.nextTick 优先级高于 Promise。
- 早期的 Node (v10及以前) 在执行完一个阶段的所有宏任务后才清空微任务，但 Node v11+ 已修改为与浏览器一致：每执行完一个宏任务就清空一次微任务。

总结

掌握事件循环的关键在于分清 同步代码 、微任务 和 宏任务 的层级。始终记住：微任务是 VIP 通道，必须优先走完；宏任务是普通通道，一次只能走一个。