记录、分享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.事件循环的工作流程

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

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

可视化流程：

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

示例：

解释：

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

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

4.1浏览器环境

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

4.2Node.js环境

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

1. Timers
2. ：执行 setTimeout 和 setInterval 回调。
3. Pending Callbacks
4. ：处理系统级回调（如 TCP 错误）。
5. Idle, Prepare
6. ：Node.js 内部操作。
7. Poll
8. ：处理 I/O 事件（如文件、网络请求）。
9. Check
10. ：执行 setImmediate 回调。
11. Close Callbacks
12. ：处理关闭事件（如 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 事件循环机制