第 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 实现原理(手写) 吗?

相关推荐
晷龙烬几秒前
Vue的“小外挂”:玩转自定义指令!
前端·javascript·vue.js
gis分享者1 分钟前
如何在 Shell 脚本中如何使用条件判断语句?(中等)
面试·shell·脚本·语法·使用·判断·条件
小徐不会敲代码~1 分钟前
Vue3 学习 4
前端·vue.js·学习
小小前端要继续努力2 分钟前
边缘函数 (Edge Functions)
前端·edge
海市公约4 分钟前
CSS 核心知识点精讲:基础概念、样式规则与布局技巧
前端·css·盒子模型·选择器·网页布局·网页样式设计
蜗牛攻城狮6 分钟前
Vite 项目中 `node_modules/.vite/deps` 文件夹详解
前端·vite·构建工具
elangyipi1238 分钟前
使用CSS Contain 优化你的页面(重排和重绘)
前端·css
小小前端要继续努力9 分钟前
Islands Architecture(岛屿架构)
前端·edge
Liu.77413 分钟前
vue使用lodop控件打印
前端·javascript·vue.js
OpenTiny社区20 分钟前
TinySearchBox 综合搜索组件重磅更新:实现 Vue 2 和 Vue 3 双版本适配!
前端·javascript·vue.js