彻底搞懂 Event Loop

JavaScript |

Event Loop（事件循环） 是 JavaScript 执行机制里的核心知识点。不管是前端面试还是日常开发，只要涉及异步，就绕不开它。

这篇文章不玩高深术语，用一套真实示例，带你搞懂：

  • 同步任务、宏任务、微任务 到底是什么
  • 它们的执行顺序和优先级
  • 最后特别提醒：Promise.resolve() 和 .then() 到底哪个才是微任务？

为什么需要 Event Loop？

JS 是单线程，意味着同一时刻只能执行一件事。
比如：

console.log("A");
console.log("B");
console.log("C");

执行结果必然是：

A
B
C

这就是同步任务：顺序执行，执行完才往下走。

但是，现实开发中需要执行很多耗时任务（比如网络请求、定时器）。如果都用同步执行，页面直接卡死，体验没法要。

所以浏览器和 Node 设计了异步队列 + Event Loop，先把耗时任务挂起，空闲时再回头执行。

同步任务、宏任务、微任务，怎么分？

先看个对比表：

类型 代表
同步任务 普通函数、console.log、函数调用
宏任务（Macrotask） 整个 <script>、setTimeout、setInterval、setImmediate、MessageChannel（浏览器）、I/O（Node）
微任务（Microtask） Promise.then()、MutationObserver、queueMicrotask、process.nextTick（Node 专属）

执行顺序口诀：

一个宏任务 → 执行同步任务 → 清空微任务 → 执行下一个宏任务 → 循环

浏览器执行顺序经典示例

来看个最典型的组合拳：

console.log("代码开始");

setTimeout(() => {
  console.log("这是 setTimeout 回调");
}, 0);

Promise.resolve().then(() => {
  console.log("这是 promise 的回调");
});

console.log("代码结束");

输出结果：

代码开始
代码结束
这是 promise 的回调
这是 setTimeout 回调

执行过程拆解：

  1. <script> 整个文件就是一个宏任务，先跑同步代码。
  2. setTimeout 是下一个宏任务，排到队列后面。
  3. Promise.then 是微任务，会在本轮宏任务跑完后立刻执行。
  4. 所以输出顺序是：同步 → 微任务 → 下一个宏任务

重点：Promise.resolve() 本身不是微任务！

超多人搞错，以为 Promise.resolve() 本身是微任务，其实不是！

来看个例子：

console.log("程序启动");

const p1 = Promise.resolve("第一个 Promise");
const p2 = Promise.resolve("第二个 Promise");
const p3 = new Promise((resolve) => {
  console.log("执行 p3 构造函数");
  resolve("第三个 Promise");
});

p1.then((value) => console.log(value));
p2.then((value) => console.log(value));
p3.then((value) => console.log(value));

setTimeout(() => {
  console.log("第一波 setTimeout");
  const p4 = Promise.resolve("第四个 Promise");
  p4.then((value) => console.log(value));
}, 0);

setTimeout(() => {
  console.log("第二波 setTimeout");
}, 0);

console.log("程序结束");

执行顺序：

程序启动
执行 p3 构造函数
程序结束
第一个 Promise
第二个 Promise
第三个 Promise
第一波 setTimeout
第四个 Promise
第二波 setTimeout

为什么？

  • Promise.resolve() 只是返回一个已确定状态的 Promise，不会产生微任务。

  • 真正触发微任务队列的是 .then() 的回调！

  • 所以这段里：

    • 同步任务先跑完：程序启动 → 执行 p3 构造函数 → 程序结束
    • 再清空微任务队列：第一个 Promise、第二个 Promise、第三个 Promise
    • 然后执行第一个 setTimeout（宏任务）：第一波 setTimeout，里面的 .then() 会生成一个新的微任务：第四个 Promise
    • 最后执行第二个 setTimeout：第二波 setTimeout

MutationObserver：监听 DOM 改变的微任务

浏览器里，MutationObserver 也属于微任务。看个示例：

const target = document.createElement("div");
document.body.appendChild(target);

const observer = new MutationObserver(() => {
  console.log("微任务: MutationObserver 回调执行");
});

observer.observe(target, { attributes: true, childList: true });

target.setAttribute("data-role", "123");
target.appendChild(document.createElement("span"));

这里修改了 target 的属性和子元素，MutationObserver 会把回调放进微任务队列，在本轮宏任务执行完后跑。

Node.js 专属：process.nextTick 比普通微任务还快！

Node.js 里还有个专属：process.nextTick，它优先级比普通微任务还高。

console.log("启动");

process.nextTick(() => {
  console.log("执行 process.nextTick");
});

Promise.resolve().then(() => {
  console.log("执行 Promise.then");
});

setTimeout(() => {
  console.log("执行 setTimeout");
  Promise.resolve().then(() => {
    console.log("setTimeout 中的 Promise");
  });
}, 0);

console.log("收尾");

输出结果：

启动
收尾
执行 process.nextTick
执行 Promise.then
执行 setTimeout
setTimeout 中的 Promise

queueMicrotask：手动插个微任务

需要自己把任务插进微任务队列？用 queueMicrotask！

console.log("准备执行");

queueMicrotask(() => {
  console.log("这是 queueMicrotask 回调");
});

console.log("执行完同步任务");

输出：

准备执行
执行完同步任务
这是 queueMicrotask 回调

和 Promise.then 一样效果，都会在本轮宏任务执行完后立刻跑。

总结：执行顺序记住这张表

优先级 队列
最高 process.nextTick（Node 专属）
第二 Promise.then、MutationObserver、queueMicrotask
最后 宏任务：setTimeout、setInterval、I/O

顺序一定是：

  • 当前宏任务执行完 → 清空所有微任务
  • 再执行下一个宏任务
  • 循环往复

最后的金句

Promise.resolve() 只是创建了一个已确定状态的 Promise，本身不是微任务。只有调用 .then() 后，回调才会排进微任务队列！