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

相关推荐
小安驾到12 分钟前
【前端的坑】vxe-grid表格tooltip提示框不显示bug
前端·vue.js
去码头整点薯条9823 分钟前
python第五次作业
linux·前端·python
沐墨染39 分钟前
Vue实战:自动化研判报告组件的设计与实现
前端·javascript·信息可视化·数据分析·自动化·vue
java1234_小锋41 分钟前
Java高频面试题:SpringBoot如何自定义Starter?
java·spring boot·面试
局外人LZ1 小时前
Uniapp脚手架项目搭建,uniapp+vue3+uView pro+vite+pinia+sass
前端·uni-app·sass
努力学算法的蒟蒻1 小时前
day77(2.5)——leetcode面试经典150
面试·职场和发展
爱上妖精的尾巴2 小时前
8-5 WPS JS宏 match、search、replace、split支持正则表达式的字符串函数
开发语言·前端·javascript·wps·jsa
Remember_9932 小时前
MySQL 索引详解:从原理到实战优化
java·数据库·mysql·spring·http·adb·面试
❀͜͡傀儡师2 小时前
基于大语言模型的简历分析和模拟面试系统
人工智能·语言模型·面试
Warren982 小时前
Pytest Fixture 作用域与接口测试 Token 污染问题实战解析
功能测试·面试·单元测试·集成测试·pytest·postman·模块测试