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

相关推荐
豆苗学前端25 分钟前
你所不知道的前端知识,html篇(更新中)
前端·javascript·面试
一 乐27 分钟前
绿色农产品销售|基于springboot + vue绿色农产品销售系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·宠物
zzjyr27 分钟前
Webpack 生命周期原理深度解析
前端
xiaohe060130 分钟前
💘 霸道女总裁爱上前端开发的我
前端·游戏开发·trae
sophie旭33 分钟前
内存泄露排查之我的微感受
前端·javascript·性能优化
k***19540 分钟前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
努力学算法的蒟蒻1 小时前
day58(1.9)——leetcode面试经典150
算法·leetcode·面试
rgeshfgreh1 小时前
Spring事务传播机制深度解析
java·前端·数据库
Hilaku2 小时前
我用 Gemini 3 Pro 手搓了一个并发邮件群发神器(附源码)
前端·javascript·github
IT_陈寒2 小时前
Java性能调优实战:5个被低估却提升30%效率的JVM参数
前端·人工智能·后端