下面是前端面试第 39 题:事件循环(Event Loop)------ 必考高频题
我会给你:最清晰版本 + 面试官喜欢的回答结构 + 对比 Node 与浏览器差异
✅ 第 39 题:什么是事件循环(Event Loop)?宏任务/微任务的执行顺序?
⭐ 标准答法(面试官最爱)
"事件循环(Event Loop)是一套用于协调同步任务与异步任务执行顺序的机制。
它决定代码、定时器、Promise、UI 渲染等在浏览器或 Node.js 中的执行顺序。"
🧩 事件循环的核心概念
1️⃣ JS 是单线程的
所以同步逻辑在主线程上执行:
同步任务 → 直接在主线程执行
异步任务 → 放到事件队列,等待回调
🧩 2️⃣ 宏任务(MacroTask)
| 宏任务 | 代表 |
|---|---|
| setTimeout | 定时器 |
| setInterval | 定时器 |
| setImmediate(Node) | Node 专用 |
| I/O 回调 | 文件/网络 |
| script 脚本 | 整个 script 是一个宏任务 |
| messageChannel | 渲染后的消息 |
🧩 3️⃣ 微任务(MicroTask)
| 微任务 | 代表 |
|---|---|
| Promise.then / catch / finally | |
| queueMicrotask | |
| MutationObserver | |
| process.nextTick(Node 单独机制) |
💡 最终执行顺序(浏览器)
📌 一次循环:
markdown
1. 执行同步任务
2. 执行所有微任务
3. 必要时渲染
4. 执行宏任务队列中的第一个任务
5. 回到步骤 2(循环)
⭐ 关键点:
- 微任务永远优先于宏任务
- 每次宏任务结束 → 必定会把所有微任务清空
🧪 最经典考题:执行结果是什么?
javascript
console.log(1)
setTimeout(() => {
console.log(2)
})
Promise.resolve().then(() => {
console.log(3)
})
console.log(4)
执行顺序:
1
4
3
2
解释:
- 同步:1、4
- 微任务:3
- 宏任务:2
🎯 浏览器 vs Node.js 事件循环的差异
面试必考!
✔ 浏览器
顺序固定:
同步 → 微任务 → 渲染 → 宏任务
✔ Node.js(比浏览器复杂)
Node 有 6 个阶段:
- timers(setTimeout)
- I/O callbacks
- idle / prepare
- poll(I/O 阶段)
- check(setImmediate)
- close callbacks
🌟 微任务在每个阶段之间执行(比浏览器更频繁)
🌟 process.nextTick 优先级最高(甚至高于微任务)
✔ 面试终极回答模板(拿满分)
"事件循环是一套控制同步任务、宏任务、微任务执行顺序的机制。
浏览器中执行顺序是:同步任务 → 所有微任务 → 必要渲染 → 一个宏任务 → 再执行所有微任务。
微任务永远优先于宏任务。
Node.js 的事件循环有多个阶段,且 process.nextTick 优先级最高。"
如果你愿意,我可以继续给你:
🔥 第 40 题:虚拟 DOM 与 Diff 算法(必考)
要继续吗?