【JS】事件循环(Event Loop)

核心概念

事件循环是 JavaScript 处理异步操作的机制，它使得单线程的 JS 能够实现非阻塞 I/O 操作。

三大关键组成部分

1. 调用栈(Call Stack)：

   • 执行同步代码的地方
   • 后进先出(LIFO)结构

2. 任务队列(Task Queues)：

   • 宏任务队列：setTimeout、setInterval、I/O 等
   • 微任务队列：Promise.then、MutationObserver 等

3. 事件循环机制：

   • 不断检查调用栈和任务队列
   • 决定何时执行哪个任务

执行流程

1. 从宏任务队列取出一个任务执行（如 script 整体代码）
2. 执行过程中：
   • 同步代码立即执行
   • 遇到异步操作，注册相应回调
3. 当前宏任务执行完毕：

• 立即执行所有微任务
• 如果微任务产生新微任务，继续执行直到队列清空

4. 必要时进行UI 渲染
5. 从宏任务队列取下一个任务，开始新循环

执行顺序示例

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

setTimeout(() => console.log('4. 宏任务'), 0); // 宏任务

Promise.resolve().then(() => console.log('3. 微任务')); // 微任务

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

/* 输出顺序：
1. 同步代码
2. 同步代码
3. 微任务
4. 宏任务
*/

重要特点

• 微任务优先级高于宏任务：每执行完一个宏任务，就会清空微任务队列
• 避免阻塞：长时间同步代码会阻塞事件循环
• 不同环境差异：Node.js 与浏览器实现有细微差别

理解事件循环是掌握 JavaScript 异步编程的基础，有助于编写高效、无阻塞的代码。