前端面试第 34 题:事件循环(Event Loop)—— 必考高频题

下面是前端面试第 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 个阶段

  1. timers(setTimeout)
  2. I/O callbacks
  3. idle / prepare
  4. poll(I/O 阶段)
  5. check(setImmediate)
  6. close callbacks

🌟 微任务在每个阶段之间执行(比浏览器更频繁)

🌟 process.nextTick 优先级最高(甚至高于微任务)


✔ 面试终极回答模板(拿满分)

"事件循环是一套控制同步任务、宏任务、微任务执行顺序的机制。

浏览器中执行顺序是:同步任务 → 所有微任务 → 必要渲染 → 一个宏任务 → 再执行所有微任务。

微任务永远优先于宏任务。

Node.js 的事件循环有多个阶段,且 process.nextTick 优先级最高。"


如果你愿意,我可以继续给你:

🔥 第 40 题:虚拟 DOM 与 Diff 算法(必考)

要继续吗?

相关推荐
前端一课1 小时前
第 28 题:手写 async/await(Generator 自动执行器原理)
前端·面试
前端一课1 小时前
第 33 题:浏览器渲染流程(Reflow 重排、Repaint 重绘、Composite 合成)*
前端·面试
前端一课1 小时前
第 26 题:Vue2 和 Vue3 的响应式原理有什么区别?为什么 Vue3 要用 Proxy 替代 defineProperty?
前端·面试
前端一课1 小时前
第 30 题:模块化原理(CommonJS vs ESModule)
前端·面试
前端一课1 小时前
第 31 题:Tree Shaking 原理与常见失效原因(高频 + 难点 + 面试必考)
前端·面试
前端一课1 小时前
第 27 题:Promise 实现原理(含手写 Promise)
前端·面试
前端一课1 小时前
第 32 题:深入理解事件循环(Event Loop)、微任务、宏任务(详细 + 难点 + 易错点)
前端·面试
前端一课2 小时前
【前端每天一题】🔥 第 25 题:什么是 Virtual DOM?它的优缺点是什么?Diff 算法是如何工作的?
前端·面试
前端一课2 小时前
【前端每天一题】第 23 题:闭包(Closure)与作用域链(详细 + 面试模板 + 速记卡)
前端·面试