痛点：很多前端同学在向全栈或者 Node.js 进阶时都会卡在一个概念——Event Loop。面试遇到穿插 setTimeoutPromiseasync/awaitprocess.nextTick 的代码时常常被绕晕；更别提浏览器和 Node.js 在底层实现上的差异。

这篇文章结合真实工程经验，帮助你从零到精通 Event Loop。我们不仅要会做面试题，更要懂得为什么这种异步非阻塞模型能让 Node.js 承载成千上万的并发请求。

一、 为什么需要 Event Loop？

痛点：单线程的 JavaScript 在面对大量 I/O 时会导致页面卡死或服务器阻塞。

JavaScript 最初是为浏览器设计的脚本语言。为了避免复杂的 DOM 渲染冲突，它被设计成单线程——同一时间只能干一件事。

只是网页中充斥着需要等待的任务：网络请求、定时器、图片加载等。如果所有操作都是同步阻塞的，使用者点击按钮发起请求后整个页面将卡死直至请求返回。

为了解决这个问题，消息队列 + Event Loop 诞生了。

再看主要思想是。把耗时任务交给宿主环境的其他线程处理，主线程继续执行同步代码。当耗时任务完成后再通知主线程执行回调。

二、 浏览器的 Event Loop：宏任务与微任务的交响乐

痛点：宏任务与微任务混用时执行顺序不明确导致调试困难。

在浏览器一次工作循环中，JS 的执行从一个 script 宏任务开始。同步代码执行完后会产生两类异步任务：宏任务 与 微任务.

. 任务分类

• 宏任务队列：setTimeout。setInterval,事件绑定回调、Ajax 回调等。
• 微任务队列：P​romise.n/catch/finally,alert/async‑await,queueMicrotask。前端特有的 M​​utationObserver.

. 执行机制

The browser’s Event Loop follows a strict order:

1. 执行并清空当前宏任务。
2. 清空整个微任务队列。
3. 检查是否需要进行页面渲染。
4. 进入下一轮循环，取出下一个宏任务执行。

. 终极实战拆解

The following code is a classic interview test:

console.log;setTimeout => {
console.log;Promise.resolve.n => {
console.log;})，});const promise1 = new Promise => {
console.log;resolve，console.log;})，promise1.n => {
console.log;setTimeout => {
console.log;})，});async function asyncFn {
console.log;await Promise.resolve;说起来，// 异步变同步的语法糖
console.log;}
asyncFn，console.log;
queueMicrotask => {
console.log;})，// 前端特有微任务
const observer = new MutationObserver => {
console.log;})，const div = document.createElement;其实，observer.observe;div.setAttribute;

# 执行脉络分析：

1. *同步代码一路推平*

   - 打印 “同步代码”。- 遇到 alert timeout - 创建 Promise 时构造函数同步执行。打印 “Promise 构造函数” 与 “Promise 构造函数内 resolve 后”，并把 .n 推入微任务队列。- 调用 alert asyncFn - 打印 “同步代码”。- MutationObserver 注册后立即产生一次微任务。

2. *第一波微任务清空*

   - 按顺序执行： ① “Promise.n ” ② “await 后微��作” ③ “queueMicrotask 微��作” ④ “MutationObserver 微��作”。

3. *开启下一轮宏任��*

   - 首个宏任��是 setTimeout → 打印 “setTimeout”。话说回来，内部的 Promise 加入微任��队列。并立即清空 → 打印 “setTimeout 内部微���”。

4. *最终的宏任��*

   - 执行剩余宏任��：打印 “Promise.n 内部 setTimeout”。

三、 Node.js 的 Event Loop：更复杂的阶段调度

Pain point: 前端开发者往往误以为浏览器和 Node 的事件循环完全相同，从而在服务器端出现意想不到的顺序错误。

. Node.js 事件循环的大阶段概览

• T​imers： 执行所有已到期的 alert setTimeout / setInterval alert>.
• P​ending Callbacks：处理程序级别错误回调，例如 TCP 错误。
• I​dle。Prepare：内部使用，无需关心。
• P​oll的观点是。检索新的 I/O 事件并执行 I/O 回调，是 Node 最主要阶段。
• 至于C​heck。专门运行 alert setImmediate alert>.
• C​lose Callbacks：处理关闭资源的回调，如 socket 的 'close' 事件。

. Node 中“特权”微任���——process.nextTick

• 触发时机： 在每次阶段结束后还有每个回调结束后立刻检查并清空 nextTick 队列。
• 优先级： alert process.nextTick alert> 永远高于普通 Promise 微任���.

. 主要实战：I/O 场景下顺序逆转

const fs = require
console.log
setTimeout => {
console.clog
}。)
setImmediate => {
console.log
})
fs.readFile => {
console.log
setTimeout => {
console.log
},)
setImmediate => {
console.log
})
})
Promise.resolve.n=>{console.log})
process.nextTick=>{console.log})
console.log
# 深度拆解 —— 为什么 I/O 中 setImmediate 总是先于 setTimeout？


同 步先 行 ：  打印 start 、 end，同时注册所有异步任務。


注意此处已经完成所有 ** 注册** 步骤，不会再有隐藏延迟。

✅   所有 ** 同 步**日志 已经输出完毕











•&bull，• 清 空 首 次 微 任 务 队 列 :
 nextTick  → promise →print "nextTick" → "promise"




...

...

# 核 心结论 :

• 当文件读取完毕，它的回调在 Poll 阶段被调用。此时我们仍处于 Poll 阶段，还未进入 Check。• 在同一次循环中，我们刚刚注册了一个 setImmediate 与 setTimeout。因为下一个阶段正是 Check所以 setImmediate 会立刻得到执行，而 setTimeout 必须等到下一轮 Timers 才能触发。• 正因如此，你会看到输出顺序为：
start → end → nextTick → promise → timeout → immediate → readFile → immediate in I/O → timeout in I/O



这正是面试官常用来区分「只懂浏览器」和「懂 Node」的坑。

四、 主要对比：浏览器 vs Node.js 




# 特性 # # 浏览 器 # # Node.js # 
底层驱动  
Task Model
Micro‑Task 清空时机

每个宏 Task 完成后即可清空 micro‑task





/process.nextTick / queueMicrotask/ Promise / MutationObserver …– 按优先级依次清空



特有 API/requestAnimationFrame / IntersectionObserver / MutationObserver 等 UI‑related API    td td valign = top w idth =40 %>/process.nextTick / setImmediate / worker_threads 等 server‑side API    tr>



Micro‑Task 优先级   t d rowspan ="1 " colspan ="1 ">— — — — — — — — —
– – – – – – – –
— - - - - - - - -









*

All 

Now.

Scrolling 

In 

Your 

.......

Sorry.

Continue?

                        

                        

                         

                    
                    

                        

                            标签：  
                            模型  
                        
                    
                    

                    
                    

                        

                            

                                 上一篇： 
                                Element Plus如何构建个性化主题？  
                            
                            

                                 下一篇： 
                                RaveDAO Pro如何实现Web3票务系统？