JavaScript 任务队列详解：Event Loop、宏任务与微任务

在 JavaScript 的世界里，异步编程是一个至关重要的概念。JavaScript 采用 单线程 运行方式，但能够处理异步任务，这一切都要归功于 事件循环（Event Loop） 机制。本文将深入剖析 JavaScript 的 任务队列（Task Queue），包括 宏任务（Macrotask） 和 微任务（Microtask），并结合示例解析代码的执行顺序。

1. 事件循环（Event Loop）

Event Loop 是 JavaScript 运行时的核心机制，负责调度 同步任务 和 异步任务。

执行顺序：

1. 执行 同步代码（同步代码会直接进入调用栈 Call Stack 运行）。
2. 执行 微任务队列（Microtask Queue） 里的所有任务。
3. 执行 宏任务队列（Macrotask Queue） 里的一个任务。
4. 回到 第 2 步，检查是否有新的 微任务，如果有，则执行所有微任务。
5. 循环往复，直到所有任务执行完成。

2. Web APIs 与异步任务

在 JavaScript 代码执行过程中，遇到 异步任务（如 setTimeout、Promise、fetch 请求等）时，并不会阻塞主线程，而是将其交给 Web APIs 处理。等任务完成后，相应的回调函数会被放入 任务队列，等待执行。

常见的 Web APIs 任务：

• 定时器（setTimeout、setInterval）
• 网络请求（fetch、XMLHttpRequest）
• DOM 事件（click、mousemove）
• I/O 操作（Node.js）

这些任务完成后，会按照一定的优先级放入 任务队列，由 事件循环 调度执行。

3. 宏任务（Macrotask） vs. 微任务（Microtask）

JavaScript 的 任务队列 分为 宏任务队列 和 微任务队列，它们的主要区别如下：

3.1 宏任务（Macrotask）

• 宏任务（Macrotask） 是相对 微任务（Microtask） 而言的较大单位任务。
• 常见的宏任务包括：
  • setTimeout
  • setInterval
  • setI