记录、分享IT相关知识和见闻！
想要了解更多软件相关知识的朋友！
记得右上角添加【关注】，支持一下！

JavaScript 是单线程语言，意味着同一时间只能执行一个任务。为了处理异步操作（如定时器、网络请求、事件监听），JavaScript 依赖事件循环机制协调任务执行。事件循环负责管理调用栈（Call Stack）、任务队列（Task Queue）和微任务队列（Microtask Queue），确保异步任务在适当的时机执行。

核心思想：事件循环不断检查调用栈是否为空，并从任务队列或微任务队列中提取任务执行，从而实现非阻塞的异步处理。

2.事件循环的核心组件

事件循环涉及以下几个关键部分：

2.1调用栈（CallStack）

调用栈是一个后进先出（LIFO）的结构，记录当前执行的函数调用。
JavaScript 引擎按顺序执行栈中的函数，执行完后弹出。
示例：

2.2任务队列（TaskQueue/MacrotaskQueue）

任务队列存储宏任务（Macrotasks），如：

setTimeout
和 setInterval 回调
I/O 操作（网络请求、文件读写）
UI 渲染
事件回调（如点击、键盘事件）

宏任务按进入队列的顺序执行。
示例：

2.3微任务队列（MicrotaskQueue）

微任务队列存储微任务（Microtasks），优先级高于宏任务，如：

Promise
的 .then、.catch、.finally 回调
queueMicrotask
任务
MutationObserver
回调

微任务在当前宏任务执行完成后、渲染前立即执行。
示例：

2.4WebAPIs和运行时环境

JavaScript 运行时（如浏览器或 Node.js）提供 Web APIs 处理异步操作，如 setTimeout、DOM 事件、AJAX 请求。
这些 API 在操作完成后将回调推入任务队列或微任务队列。

3.事件循环的工作流程

事件循环是一个不断运行的循环，处理任务的步骤如下：

检查调用栈
如果调用栈为空，继续后续步骤；否则，执行栈顶函数。
处理微任务队列
执行微任务队列中的所有任务，直到队列为空。
微任务可能在执行过程中添加新的微任务，需全部清空。
处理宏任务队列
从任务队列中取出一个宏任务，推入调用栈执行。
渲染（浏览器环境）
如果需要，浏览器执行 UI 渲染（如重绘、重新布局）。
重复循环
返回第 1 步，持续运行。

可视化流程：

调用栈空 -> 执行所有微任务 -> 执行一个宏任务 -> 渲染（浏览器） -> 重复

示例：

解释：

console.log("Start")
入栈，执行，弹出。
setTimeout
注册回调，推入任务队列。
两个 Promise.resolve().then 回调推入微任务队列。
console.log("End")
入栈，执行，弹出。
调用栈清空，执行微任务队列：输出 Promise 1 和 Promise 2。
从任务队列取一个宏任务，输出 Timeout。

4.浏览器vs.Node.js的事件循环

4.1浏览器环境

浏览器的事件循环包括宏任务、微任务和渲染阶段。
渲染阶段在微任务执行后、下一个宏任务前发生（如更新 DOM）。
示例：

4.2Node.js环境

Node.js 的事件循环更为复杂，分为多个阶段，由 libuv 库管理：

Timers
：执行 setTimeout 和 setInterval 回调。
Pending Callbacks
：处理系统级回调（如 TCP 错误）。
Idle, Prepare
：Node.js 内部操作。
Poll
：处理 I/O 事件（如文件、网络请求）。
Check
：执行 setImmediate 回调。
Close Callbacks
：处理关闭事件（如 socket 关闭）。

微任务队列在每个阶段后清空，优先级高于宏任务。
示例：

5.常见问题与注意事项

5.1为什么setTimeout(fn,0)不立即执行？

setTimeout
的回调进入宏任务队列，需等待调用栈清空和微任务执行完成。
延迟 0 毫秒只是请求尽快执行，但受事件循环调度限制。

5.2微任务优先级高于宏任务

微任务在当前宏任务后立即执行，可能导致宏任务延迟。
示例：

5.3事件循环与性能

阻塞调用栈：长时间运行的同步代码会阻塞事件循环，延迟异步任务。

过多微任务：微任务队列过长可能导致渲染延迟，影响用户体验。

5.4避免常见陷阱

合理使用异步
：避免在微任务中无限添加任务。
监控性能
：使用 performance.now() 或 DevTools 的 Performance 面板分析事件循环瓶颈。
Node.js 定时器注意
：setTimeout 和 setImmediate 的执行顺序可能因上下文而异。

6.实际应用场景

DOM 事件处理：

异步请求：

动画与渲染：

7.调试与分析工具

Chrome DevTools

Performance 面板：记录事件循环、宏任务和微任务的执行时间线。
Sources 面板：设置断点调试异步代码。

Node.js：

使用 --inspect 结合 DevTools 分析事件循环。
process.nextTick
（Node.js 独有，优先于微任务）可用于调试微任务。

JavaScript 的事件循环通过协调调用栈、微任务队列和宏任务队列，实现了单线程环境下的高效异步处理。理解事件循环的机制有助于编写高性能的异步代码，避免阻塞和内存问题。在浏览器和 Node.js 中，事件循环的实现略有不同，但核心原理一致。开发者应注意微任务和宏任务的优先级，合理使用异步 API，并利用调试工具优化代码。

说明：创作不易，喜欢我的文章，记得添加【关注】哦！再次感谢你的支持！欢迎转载！转载请标注来源【新猿习社】即可，无需授权！

长按【点赞】会有惊喜哦！

~End~

封面和摘要

JavaScript 事件循环机制

泽兴芝士网

一站式 IT 编程学习资源平台

JavaScript 事件循环机制详解（js事件循环机制的理解）