第 26 题:浏览器与 Node.js 的事件循环有什么区别?

好的,继续 第 31 题(超级高频,全栈必考)


第 31 题:浏览器与 Node.js 的事件循环有什么区别?

这题是事件循环最容易被问"细节"的地方。

前端工程师面试:80% 会问

Node 面试:100% 会问


一、为什么有事件循环?(必会)

因为 JS 是单线程 → 不能阻塞 → 异步任务需要排队执行

事件循环就是管理 同步任务 + 异步任务(宏任务、微任务) 的调度器。


二、浏览器事件循环流程(记住一句话)

微任务永远在下一轮宏任务前执行。

任务分类:

宏任务(Macro Task)

  • setTimeout
  • setInterval
  • DOM 事件
  • I/O
  • script 整体代码
  • MessageChannel
  • postMessage

微任务(Micro Task)

  • Promise.then / catch / finally
  • MutationObserver
  • queueMicrotask

浏览器事件循环步骤(最重要的三步)

1. 执行一个宏任务(script)
2. 清空全部微任务队列
3. UI 渲染(可能发生)

然后继续下一轮循环。


浏览器口诀(面试好用)

一次宏任务 → 清空全部微任务 → 再下一轮宏任务


三、Node.js 事件循环(关键点:6 个阶段 + 微任务在每个阶段之间执行)

Node.js 基于 libuv,事件循环有 6 个阶段:

  1. timers 阶段

    • 执行 setTimeout / setInterval 的回调
  2. pending callbacks 阶段

    • 执行某些系统级回调
  3. idle / prepare 阶段

    • libuv 内部使用(面试不问)
  4. poll 阶段(最重要)

    • 处理 I/O 回调
    • 如果队列为空,会阻塞等待
    • 若有 setImmediate,则跳到 check
  5. check 阶段

    • 执行 setImmediate 回调
  6. close callbacks 阶段

    • 执行 close 事件,如 socket.on('close')

Node 微任务的执行规则(区别核心)

Node 会在每个阶段之间都执行微任务队列(nextTick > Promise)。

微任务优先级(Node 专属):

  1. process.nextTick(最高优先级!)
  2. Promise.then(普通微任务)

四、浏览器 vs Node.js 事件循环区别(面试官喜欢问)

比较点 浏览器 Node.js
微任务执行时机 每轮宏任务后 统一清空 每个阶段之间都执行
微任务优先级 Promise 优先 nextTick > Promise
定时器与 IO 无阶段 有 6 个阶段
setTimeout vs setImmediate setTimeout ≈ 下轮宏任务 setImmediate 在 check 阶段(更快)
渲染机制 微任务清空后可能渲染 UI 没有 UI 渲染

五、必考例题(一定会考,就考这个!)

例题 1(浏览器):

javascript 复制代码
console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

console.log(4);

执行顺序:

复制代码
1
4
3   ← 微任务优先
2

例题 2(Node.js):

javascript 复制代码
setTimeout(() => {
  console.log('timeout');
});

setImmediate(() => {
  console.log('immediate');
});

Node 常见情况:

bash 复制代码
timeout
immediate

但实际不一定稳定,同一次 I/O 后执行:

bash 复制代码
immediate
timeout

例题 3(Node 微任务优先级)

javascript 复制代码
Promise.resolve().then(() => console.log('promise'));
process.nextTick(() => console.log('nextTick'));

输出:

arduino 复制代码
nextTick
promise

六、20 秒背诵版(面试必杀技)

浏览器:一次宏任务执行后,会立即清空所有微任务,然后再进行下一轮宏任务;微任务包括 Promise 和 queueMicrotask。
Node:基于 libuv,有 6 个阶段,每个阶段之间都会执行微任务;且微任务优先级是 nextTick > Promise。

浏览器只有宏任务 → 微任务
Node 每个阶段之间都插一次微任务。


要继续 第 32 题:Promise 实现原理(手写) 吗?

相关推荐
ywf121543 分钟前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
程序员爱钓鱼43 分钟前
Go排序核心库: sort包深度指南
后端·面试·go
恋猫de小郭1 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter
hpoenixf7 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特7 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷7 小时前
阶段一:从 0 看懂 JSVMP 架构,先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian8 小时前
前端node常用配置
前端
华洛8 小时前
利好打工人,openclaw不是企业提效工具,而是个人助理
前端·javascript·产品经理
xkxnq8 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
RainyJiang9 小时前
谱写Kotlin协程面试进行曲-进阶篇(第二乐章)
面试·kotlin·android jetpack