企业官网建设流程全解析

# 深入理解 JavaScript 事件循环：宏任务、微任务与实战解析  > 本文从 JavaScript 单线程模型出发，逐步拆解事件循环（Event Loop）的核心机制，包括调用栈、宏任务队列、微任务队列的协作方式，并通过实战案例帮助你真正理解代码的执行顺序。 ## 一、为什么 JavaScript 是单线程？ JavaScript 最初被设计为浏览器脚本语言，核心用途是操作 DOM 和处理用户交互。如果它支持多线程——一个线程在修改 DOM，另一个线程在删除 DOM——浏览器就无法决定以谁为准。 因此，JavaScript 从诞生起就是**单线程**语言：同一时间只能做一件事。 但单线程不意味着"卡死"。浏览器提供了**事件循环机制**，让 JavaScript 可以处理异步任务而不阻塞主线程。理解这个机制，是写出高性能前端代码的基础。 ## 二、调用栈（Call Stack） 调用栈是 JavaScript 引擎追踪函数执行的机制——**后进先出（LIFO）**。 ```javascript function multiply(a, b) { return a * b; } function square(n) { return multiply(n, n); } function printSquare(n) { const result = square(n); console.log(result); } printSquare(5); // 输出: 25 ``` 执行过程： 1. `printSquare(5)` 入栈 2. `square(5)` 入栈 3. `multiply(5, 5)` 入栈 4. `multiply` 返回 25，出栈 5. `square` 返回 25，出栈 6. `console.log(25)` 入栈，执行后出栈 7. `printSquare` 出栈，栈清空 如果某个函数执行时间很长（比如同步的网络请求），后面的代码就会被阻塞——这就是"卡顿"的根源。 ## 三、异步任务与 Web API 浏览器提供了一套 **Web API**（如 `setTimeout`、`fetch`、`DOM Events`），这些 API 不在 JavaScript 引擎中执行，而是由浏览器的 C++ 底层处理。 当 JavaScript 调用 `setTimeout` 时，引擎不会等待，而是把它交给浏览器处理，自己继续执行下一行代码。当计时结束后，回调函数会被放入**任务队列**等待执行。 ```javascript console.log('1. 开始'); setTimeout(() => { console.log('3. 定时器回调'); }, 0); console.log('2. 结束'); // 输出顺序: 1 → 2 → 3 ``` 即使 `setTimeout` 的延迟设为 0，回调也不会立即执行——它必须等到当前调用栈清空后才会被处理。 ## 四、宏任务与微任务 任务队列不止一个。ES6 规范中，异步任务分为两类： | 类型 | 示例 | 优先级 | |------|------|--------| | **宏任务（Macrotask）** | `setTimeout`、`setInterval`、`I/O`、UI 渲染 | 低 | | **微任务（Microtask）** | `Promise.then`、`MutationObserver`、`queueMicrotask` | 高 | 关键规则：**每次宏任务执行完毕后，引擎会清空所有微任务队列，然后才执行下一个宏任务。** 这意味着微任务总是在宏任务之前执行（前提是它们在同一个事件循环轮次中）。 ## 五、事件循环的完整流程 1. 从宏任务队列中取出**一个**任务执行 2. 执行过程中，如果产生微任务，加入微任务队列 3. 当前宏任务执行完毕后，**清空所有微任务** 4. 检查是否需要渲染（通常 60fps，约 16ms 一次） 5. 回到步骤 1，重复 ``` ┌─────────────────────────────┐ │ 宏任务队列 │ │ [setTimeout, I/O, ...] │ └──────────┬──────────────────┘ │ 取出一个执行 ▼ ┌─────────────────────────────┐ │ 调用栈 │ │ 执行同步代码 + 回调 │ └──────────┬──────────────────┘ │ 栈清空后 ▼ ┌─────────────────────────────┐ │ 微任务队列 │ │ [Promise.then, ...] │ │ ← 全部执行完毕 │ └──────────┬──────────────────┘ │ 微任务清空后 ▼ ┌─────────────────────────────┐ │ 渲染（可选） │ │ requestAnimationFrame │ └──────────┬──────────────────┘ │ ▼ 回到宏任务队列 ``` ## 六、实战：你能说对这段代码的输出顺序吗？ ```javascript console.log('A'); setTimeout(() => { console.log('B'); }, 0); Promise.resolve().then(() => { console.log('C'); }); Promise.resolve().then(() => { console.log('D'); }); console.log('E'); // 输出顺序是什么？ ``` **答案：A → E → C → D → B** 解析： 1. `console.log('A')` — 同步代码，立即执行 2. `setTimeout` — 回调加入**宏任务队列** 3. 两个 `Promise.then` — 回调加入**微任务队列**（顺序：C 在前，D 在后） 4. `console.log('E')` — 同步代码，立即执行 5. 调用栈清空 → 执行所有微任务 → 输出 C、D 6. 微任务清空 → 执行下一个宏任务 → 输出 B 再看一个更复杂的例子： ```javascript async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); // 这行何时执行？ } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(() => { console.log('setTimeout'); }, 0); async1(); new Promise((resolve) => { console.log('promise'); resolve(); }).then(() => { console.log('promise then'); }); console.log('script end'); ``` **答案：** ``` script start async1 start async2 promise script end async1 end promise then setTimeout ``` 关键点：`await` 会暂停当前 async 函数的执行，`await` 之后的代码相当于 `.then()` 回调——是**微任务**。因此 `async1 end` 和 `promise then` 都在同步代码执行完毕后才输出。 ## 七、常见陷阱与最佳实践 ### 1. 不要在微任务中创建无限循环 ```javascript // ❌ 危险！这会阻塞所有渲染和宏任务 function loop() { Promise.resolve().then(loop); } loop(); ``` 微任务队列永远不会清空，页面会完全冻结，用户无法交互。 ### 2. 大量同步计算用 setTimeout 分片 ```javascript // ✅ 将耗时任务拆分成小块，每块执行不超过 50ms function chunk(array, process, callback) { const items = [...array]; function processChunk() { const start = Date.now(); while (items.length > 0 && Date.now() - start < 50) { process(items.shift()); } if (items.length > 0) { setTimeout(processChunk, 0); // 让出主线程 } else { callback(); } } processChunk(); } ``` ### 3. requestAnimationFrame 优于 setTimeout 做动画 ```javascript // ✅ 与浏览器渲染节奏同步，不会丢帧 function animate() { // 更新动画状态 requestAnimationFrame(animate); } requestAnimationFrame(animate); ``` `setTimeout(fn, 0)` 的实际最小延迟约为 4ms，而且可能在渲染之前执行，导致动画卡顿。`requestAnimationFrame` 保证在下次重绘前调用，天然流畅。 ### 4. 注意 Promise 链的错误处理 ```javascript // ❌ 未捕获的 Promise 错误不会阻塞后续微任务 Promise.resolve().then(() => { throw new Error('oops'); }); Promise.resolve().then(() => { console.log('仍然会执行'); // 这行会输出 }); // ✅ 正确处理 Promise.resolve() .then(() => { throw new Error('oops'); }) .catch(err => console.error(err.message)); ``` ## 八、总结 | 概念 | 要点 | |------|------| | 调用栈 | 同步代码的执行顺序，LIFO | | 宏任务 | `setTimeout`、`setInterval`、I/O 等 | | 微任务 | `Promise.then`、`queueMicrotask` 等 | | 执行优先级 | 同步代码 > 微任务 > 宏任务 | | 渲染时机 | 微任务清空后，下一个宏任务前 | 理解事件循环的核心就一句话： > **每次宏任务结束后，清空所有微任务；微任务全部执行完毕后，才进入下一个宏任务。** 掌握了这个规则，你就能准确预测任何 JavaScript 代码的执行顺序，写出更可靠的异步代码。 --- *本文为原创技术分享，欢迎交流讨论。*