JS Event Loop 原理详解：宏任务、微任务与异步执行顺序

Event Loop，中文常译为事件循环，它是 JavaScript 语言在运行时环境中实现异步调度的核心机制。

与 Java 等支持真正并发执行的多线程语言不同，JavaScript 本质上采用单线程模型，其异步操作并非并行执行。

JavaScript 维护着一个任务队列，当遇到定时器或用户点击按钮等异步任务时，这些操作不会立即执行，而是被放入队列中。只有当当前正在执行的任务完成后，队列中的任务才会依次被取出执行。

队列是一种操作受限的有序数据结构，遵循“先进先出”（FIFO）原则，即先入队的元素必须先被处理，这类似于现实中的排队现象。

尽管存在优先级队列等特殊形式，允许高优先级元素优先出队，但 JavaScript 的基础队列仍主要遵循常规顺序。

之所以称之为 Event Loop，是因为其核心逻辑可以通过以下伪代码来描述：

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

当一个任务执行完毕后，系统会检查队列中是否有等待的任务，若有则处理下一个任务，如此循环往复，形成闭环。

由于 JavaScript 是单线程执行，为了避免主线程阻塞，网络请求、页面渲染等耗时操作会被委派给其他线程处理。待其他线程完成工作后，将结果返回给 JavaScript 引擎继续执行。

因此，JavaScript 更适合处理 I/O 密集型场景，而非 CPU 密集型任务。若计算任务耗时过长，会阻塞后续任务的执行，导致页面卡顿甚至崩溃。

关于 setTimeout 定时器的准确性问题

setTimeout 指定的回调函数并不会在设定的时间点后立即执行，而是先被放入任务队列。只有当队列中前面的同步任务全部执行完毕后，该回调函数才有机会被执行。

以下示例展示了一个耗时同步任务对后续 setTimeout 执行的影响：第一个 setTimeout 中包含大量计算，导致其执行时间延长，进而阻塞了第二个 setTimeout 的执行，使其比预期延迟了约半秒。

const start = new Date().getTime();
setTimeout(() => {
  console.log('1:', new Date().getTime() - start);
  let num = 0;
  for (let i = 0; i < 999999999; i++) {
    num = i;
  }
}, 1000);
setTimeout(() => {
  console.log('2:', new Date().getTime() - start);
}, 1000);
/**
 * 输出结果：
 * 1: 1001
 * 2: 1505
 */

定时器的时间参数仅表示“最早可执行时间”，并不能保证在该时间点立即执行，实际执行时间取决于当前任务队列的状态。

宏任务与微任务的区分

JavaScript 的任务队列并非严格的先进先出，其执行顺序是可以调整的。

我们将任务划分为宏任务（Macrotask）和微任务（Microtask）。宏任务遵循正常的先进先出顺序，而微任务则具有插队能力，优先于宏任务执行。只有当所有微任务执行完毕后，才会继续执行宏任务。

当向任务队列添加微任务时，它会被插入到当前宏任务之前。若存在多个微任务，它们之间保持入队时的相对顺序。

常见的宏任务包括：

script，即 HTML 中嵌入的主脚本代码。
setTimeout 和 setInterval 定时器。
setImmediate，这是 Node.js 特有的 API。
requestAnimationFrame，在页面重绘前执行。
I/O 操作，包括网络请求完成的回调、按钮点击事件等。这些操作由其他线程完成后触发，统一归为 I/O 宏任务。

常见的微任务包括：

Promise 状态从 pending 转换为 resolved 或 rejected 时，触发的 then/catch/finally 中的回调函数，例如 Promise.resolve().then(fn)，这是最常见的微任务形式。
MutationObserver，用于监听 DOM 树的变化。
process.nextTick，这是 Node.js 特有的 API，优先级高于其他微任务。

从理论层面看，一个任务队列即可满足需求，但实际实现中可以是多个队列的组合，标准并未强制规定数量。

多队列实现有助于更好地控制优先级。例如，对于定时器任务，理论上应在宏任务中优先执行。虽然浏览器未特别优化此场景，但 Node.js 在宏任务内部设置了优先级，确保定时器任务最先执行。

Event Loop 机制较为复杂，相关标准文档篇幅较长，此处仅作简要介绍，感兴趣者可查阅官方规范。

https://html.spec.whatwg.org/multipage/webappapis.html#event-loops。

一道经典的异步执行顺序题目

async function async1() {
  console.log("async1 start");
  await async2();
  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");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')

解题思路如下：

首先识别同步代码，包括普通同步代码、new Promise 构造函数内传入的回调函数执行部分，以及 async 函数中 await 关键字前的代码（注意：await 右侧函数的执行也是同步的，这是常见易错点）。
接着分析任务队列中的微任务和宏任务，牢记微任务必须全部执行完毕后才会执行宏任务。
最后按顺序执行任务，任务中产生的新异步操作会按顺序重新进入任务队列。

最终输出结果为：

// 同步代码 script start async1 start async2 promise1 script end // 微任务 async1 end promise2 // 宏任务 setTimeout

总结

JavaScript 采用单线程运行机制，当存在多个异步任务时，它们无法并发执行，必须按优先级顺序依次执行。若当前任务耗时过长，将阻塞后续任务，导致页面响应迟缓。

Event Loop 机制中最基本的原则是：微任务的执行优先级高于宏任务。

至此，关于 JavaScript 中 Event Loop 机制的介绍已完成，更多相关内容可参考本站其他文章或继续浏览后续内容，感谢支持。

深入理解 JavaScript Event Loop 运行机制与任务队列

关于 setTimeout 定时器的准确性问题

宏任务与微任务的区分

一道经典的异步执行顺序题目

总结

实用工具推荐