彻底搞懂 Event Loop！一次性吃透宏任务、微任务、执行顺序

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

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

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

🧵 为什么需要 Event Loop？

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

比如执行以下同步代码：

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

执行结果必然是：

ABC

这就是同步任务的特点：顺序执行，只有前一个任务执行完毕，才会执行下一个任务。

但在实际开发中，我们经常会遇到网络请求、定时器等耗时任务。如果这些任务都采用同步执行的方式，页面会被卡住，用户体验极差。

为了解决这个问题，浏览器和 Node.js 设计了“异步队列 + Event Loop”的机制：先把耗时的异步任务挂起，等同步任务执行完毕、主线程空闲时，再回头执行异步队列里的任务。

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

三者分类对比表

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

核心执行顺序口诀

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

✅ 浏览器执行顺序经典示例

来看一个典型的混合任务示例，理解执行顺序：

console.log('代码开始');setTimeout(()=>{console.log('这是 setTimeout 回调');},0);Promise.resolve().then(()=>{console.log('这是 promise 的回调');});console.log('代码结束');

🧐 输出结果

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

执行过程拆解

整个<script>文件作为第一个宏任务，首先执行其中的同步代码：先输出代码开始，再输出代码结束；
setTimeout属于宏任务，会被放入宏任务队列，等待下一轮 Event Loop 执行；
Promise.then()属于微任务，会被放入微任务队列，在当前宏任务的同步代码执行完毕后立刻执行；
当前宏任务的同步代码执行完后，清空微任务队列，执行Promise.then()的回调，输出这是 promise 的回调；
微任务队列清空后，执行下一个宏任务（即setTimeout的回调），输出这是 setTimeout 回调。

核心结论：同步任务 → 微任务 → 下一个宏任务

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

很多人会误以为Promise.resolve()本身是微任务，但实际并非如此！真正的微任务是.then()中的回调函数。

来看这个验证示例：

console.log('程序启动');constp1=Promise.resolve('第一个 Promise');constp2=Promise.resolve('第二个 Promise');constp3=newPromise(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');constp4=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 构造函数内的代码是同步执行的）→程序结束；
- 当前宏任务的同步代码执行完后，清空微任务队列：依次执行 p1、p2、p3 的.then()回调，输出对应的内容；
- 微任务队列清空后，执行下一个宏任务（第一个setTimeout）：输出第一波 setTimeout，其中的p4.then()被加入微任务队列，立刻执行并输出第四个 Promise；
- 最后执行第二个setTimeout宏任务，输出第二波 setTimeout。

🧬 MutationObserver：监听 DOM 改变的微任务

在浏览器中，MutationObserver也是微任务的一种，它的作用是监听 DOM 元素的变化，当 DOM 发生指定变化时，回调函数会被加入微任务队列。

示例代码：

consttarget=document.createElement('div');document.body.appendChild(target);constobserver=newMutationObserver(()=>{console.log('微任务: MutationObserver 回调执行');});// 配置监听：监听属性变化和子元素变化observer.observe(target,{attributes:true,childList:true});// 修改 DOM，触发监听target.setAttribute('data-role','123');target.appendChild(document.createElement('span'));

执行结果

微任务: MutationObserver 回调执行

解析：修改 DOM 的操作是同步任务，执行完毕后，MutationObserver的回调会被加入微任务队列，在当前宏任务执行完后立刻执行。

⚡ Node.js 专属：`process.nextTick`优先级最高的微任务

在 Node.js 环境中，有一个专属的微任务process.nextTick，它的优先级比普通微任务（如Promise.then()）更高——在当前宏任务的同步代码执行完后，会先执行所有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方法，它的效果和Promise.then()一致，都会在当前宏任务执行完后立刻执行。

示例代码：

console.log('准备执行');queueMicrotask(()=>{console.log('这是 queueMicrotask 回调');});console.log('执行完同步任务');

输出结果

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

🗂️ 最终总结：执行优先级表格

优先级	队列内容
🥇 最高	`process.nextTick`（Node.js 专属）
🥈 第二	`Promise.then()`、`MutationObserver`（浏览器）、`queueMicrotask`
🥉 最后	宏任务：`setTimeout`、`setInterval`、`I/O`（Node.js）、`MessageChannel`（浏览器）等