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

深入理解 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 流程如下：

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

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

4. 实战代码解析

案例一：基础顺序

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

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

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

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

解析：

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

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

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');

解析：

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

案例三：async/await 的本质

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

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');

深度解析：

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

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

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

5. 易错点与注意事项

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

总结

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