了解 JavaScript 事件循环：初学者指南
2026-10-31 12:21:58
JavaScript 事件循环是运行时环境的核心组件，负责协调同步和异步任务的执行。其工作机制围绕调用堆栈、Web API、微任务队列（作业队列）和宏任务队列（任务队列）展开，通过优先级调度确保代码高效运行。以下是详细解析：
1. 核心组件与流程调用堆栈（Call Stack）
后进先出（LIFO）结构，存储当前执行的同步函数。
函数调用时压入堆栈，执行完毕后弹出。若堆栈非空，事件循环需等待其清空。
Web API
浏览器提供的异步处理接口（如 setTimeout、fetch、Promise）。
异步操作在此执行，完成后将回调函数推入对应队列（微任务或宏任务）。
微任务队列（作业队列）
高优先级，包含 Promise.then、async/await、process.nextTick（Node.js）的回调。
先进先出（FIFO），每次调用堆栈清空后，优先处理全部微任务，再处理宏任务。
宏任务队列（任务队列）
低优先级，包含 setTimeout、setInterval、I/O 操作、UI 渲染等回调。
仅在微任务队列清空后，事件循环才会处理宏任务。
- 执行同步代码：所有同步函数按调用顺序压入调用堆栈并执行。
- 处理异步任务：
遇到异步操作（如 setTimeout），交给 Web API 处理，并注册回调到对应队列。
例如：setTimeout(() => console.log('宏任务'), 0) 的回调进入宏任务队列；Promise.resolve().then(() => console.log('微任务')) 进入微任务队列。
- 调用堆栈清空后：
优先检查微任务队列，按 FIFO 顺序执行所有微任务，直到队列为空。
再处理宏任务队列，每次仅执行一个宏任务（如一个 setTimeout 回调），然后重复检查微任务队列。
- 循环往复：持续监控堆栈和队列，确保任务按优先级执行。
微任务优先于宏任务：即使宏任务先注册，微任务也会先执行。
setTimeout(() => console.log('宏任务'), 0);Promise.resolve().then(() => console.log('微任务'));// 输出顺序：微任务 → 宏任务微任务嵌套：微任务中触发的微任务会立即加入队列并执行。
Promise.resolve().then(() => { console.log('微任务1'); Promise.resolve().then(() => console.log('微任务2'));});// 输出顺序：微任务1 → 微任务2宏任务分片执行：每次事件循环仅处理一个宏任务，避免长时间阻塞。
setTimeout(() => console.log('宏任务1'), 0);setTimeout(() => console.log('宏任务2'), 0);// 输出顺序：宏任务1 → 宏任务2（但可能因事件循环机制交替执行）
- 避免阻塞调用堆栈：长时间运行的同步代码会延迟异步任务执行。
- 合理使用微任务：如需高优先级操作（如状态更新后立即渲染），使用 Promise 而非 setTimeout。
- 调试工具：浏览器开发者工具的 Performance 面板可观察事件循环行为。
通过理解事件循环的优先级机制，开发者能更精准地控制异步代码的执行顺序，优化应用性能。
热门标签
