彻底理解事件循环（Event Loop）：从单线程到异步世界的桥梁

阿喵派我来抓鱼

于 2025-05-19 14:18:47 发布

阅读量626

点赞数 15

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/chl13218996367/article/details/148059997

版权

关于事件循环被问了很多次，也遇到过很多次，一直没有系统整理，网上搜的，基本明白但总感觉不够透彻，最后，自己动手，丰衣足食，哈哈

一、为什么需要事件循环？—— 单线程的困境

JavaScript 作为浏览器的核心脚本语言，从诞生起就被设计为单线程执行模式。这意味着同一时间只能处理一个任务，比如执行一段计算代码、响应一次点击事件、解析一段 JSON 数据。

这种设计带来了两个核心问题：

阻塞风险：如果某个任务耗时过长（如复杂计算），会导致整个程序卡住
异步需求：网络请求、定时器、用户输入等异步操作无法直接同步处理

为了解决这些问题，JavaScript 引入了事件循环（Event Loop）机制，它就像一个后台管家，负责协调异步任务的执行顺序，让单线程环境也能高效处理复杂的异步场景。

二、事件循环的核心组成部分

要理解事件循环，需要先掌握三个关键概念（以浏览器环境为例）：

1. 调用栈（Call Stack）

作用：记录当前正在执行的函数调用栈

特点：遵循 "后进先出" 原则，主线程直接操作调用栈

示例：当执行a(); b();时，调用栈会先压入 a 函数，执行完弹出，再压入 b 函数

2. 任务队列（Task Queue）

作用：存放异步操作完成后的回调任务（宏任务）

常见类型：

setTimeout/setInterval定时器回调
原生 Promise 的then/catch/finally（注意：Promise 构造函数是同步执行！）
I/O 操作（如 Fetch 网络请求回调）
UI 渲染任务

3. 微任务队列（Microtask Queue）

作用：存放需要尽快执行的高优先级异步任务

关键特性：

- 优先级高于任务队列中的宏任务

- 每次事件循环开始前会先清空微任务队列

常见类型：

- Promise.then()回调（注意：async/await本质也是 Promise）

- MutationObserver（DOM 变化监听）

- Node.js 中的process.nextTick（优先级更高）

三、事件循环的执行流程 —— 阶段解析图

（图示说明：箭头表示执行顺序，队列存放对应任务）

核心执行步骤：

初始化阶段：创建调用栈、任务队列、微任务队列

执行同步代码：主线程先执行全局作用域中的同步代码

处理微任务：

- 按加入顺序执行微任务队列中的所有任务

- 每次执行微任务时可能会向队列中添加新的微任务（递归处理）

执行宏任务：

- 从任务队列中取出一个最旧的宏任务（先进先出）

- 将其回调放入调用栈执行

渲染阶段（浏览器环境特有）：

- 检查是否有 UI 更新任务（如requestAnimationFrame）

- 合并多次 DOM 操作，执行最终渲染

循环往复：重复步骤 3-5，直到所有队列清空

关键规则：

微任务优先：每次事件循环开始前必先处理完所有微任务

宏任务排队：同一类型的宏任务按创建顺序执行

阶段切换：浏览器和 Node.js 的具体阶段划分略有不同（后文详述）

四、宏任务 vs 微任务：用代码看差异

console.log('同步代码1');

setTimeout(() => {

console.log('定时器回调（宏任务）');

}, 0);

Promise.resolve()

.then(() => {

console.log('Promise微任务1');

return Promise.resolve(); // 新增微任务

})

.then(() => {

console.log('Promise微任务2');

});

console.log('同步代码2');

执行顺序解析：

同步代码执行：输出 "同步代码 1" → "同步代码 2"

微任务队列：两个then回调加入队列

处理微任务：

- 执行第一个then：输出 "微任务 1"，新增第二个then到队列

- 执行第二个then：输出 "微任务 2"

处理宏任务：定时器回调执行，输出 "定时器回调"

核心结论：微任务会在当前同步代码执行完毕后，立即在同一事件循环中执行，而宏任务需要等待下一次事件循环。

五、浏览器 vs Node.js：事件循环的差异

虽然核心机制相同，但具体阶段划分存在差异：

浏览器环境（重点阶段）：

Timer 阶段：处理setTimeout/setInterval回调

I/O 阶段：处理网络请求、文件操作等 I/O 回调

Idle/Prepare 阶段：Node.js 特有，浏览器无此阶段

Poll 阶段：处理 I/O 完成后的回调，控制事件循环节奏

Check 阶段：处理setImmediate（Node.js）或requestIdleCallback（浏览器）

Close 阶段：处理close事件回调（如 TCP 连接关闭）

Node.js 环境（v11 + 阶段划分）：

┌───────────────────┐

│ timers │ （处理setTimeout/setInterval）

├────────────┬──────────┤

│ I/O callbacks │ （处理网络、文件I/O回调）

├────────────┼──────────┤

│ idle/prepare │ （内部使用，用户不可操作）

├────────────┼──────────┤

│ poll │ （等待I/O事件，处理新的I/O回调）

├────────────┼──────────┤

│ check │ （处理setImmediate回调）

└────────────┴──────────┘

close callbacks （处理close事件）

关键差异：

Node.js 的process.nextTick微任务优先级高于所有阶段

浏览器的事件循环与 UI 渲染强绑定（如每秒 60 次的requestAnimationFrame）

六、实战应用：如何利用事件循环优化代码

1. 避免长时间阻塞主线程

// 错误示例：同步计算阻塞主线程

function heavyCalculation() {

for(let i=0; i<10086; i++) {} // 耗时操作

}

// 正确做法：分解任务到宏任务队列

function splitTask() {

setTimeout(heavyCalculation, 0); // 下一次事件循环执行

// 或使用requestIdleCallback（空闲时执行）

}

2. 理解异步代码执行顺序

async function asyncDemo() {

console.log('async函数开始');

await Promise.resolve(); // 相当于then回调

console.log('await之后');

}

console.log('同步代码');

asyncDemo();

console.log('async调用结束');

// 输出顺序：

// 同步代码 → async函数开始 → async调用结束 → await之后（微任务阶段）

3. 处理海量数据时的性能优化

使用setImmediate（Node.js）或setTimeout（0ms）拆分批量操作

利用微任务处理高优先级回调（如状态更新后的立即通知）

七、总结：事件循环的本质与价值

事件循环的本质是单线程环境下的异步协调机制，它通过以下方式解决异步难题：

任务分类：通过宏任务 / 微任务队列实现优先级管理

循环处理：通过不断往返于 "执行 - 队列处理" 实现异步任务调度

阶段控制：在浏览器和 Node.js 中通过不同阶段划分实现场景优化

理解事件循环，就能真正掌握 JavaScript 异步编程的核心：

为什么Promise.then比setTimeout先执行？

async/await背后的执行机制是什么？

如何避免 UI 卡顿或 Node.js 事件循环阻塞？

下次遇到异步代码执行顺序问题时，不妨在脑海中画出这个循环图：同步代码→微任务→宏任务→渲染，按照这个顺序拆解，复杂问题就能迎刃而解。

（全文完，欢迎在评论区讨论事件循环的实际应用场景～）