事件循环是 JavaScript 异步编程的核心机制，也是浏览器和 Node.js 处理非阻塞 I/O 的关键。理解它能帮助你写出更高效、无 bug 的代码！

🧠 事件循环的基本概念

事件循环（Event Loop）是一个循环机制，用于处理异步任务和回调函数。它通过以下步骤运作：

  1. 执行同步代码
  2. 清空任务队列（如 setTimeout、setInterval）
  3. 处理微任务（如 Promise.then、MutationObserver）
  4. 重复循环（回到第一步）

⚠️ 微任务优先级高于宏任务，这会导致 Promise 链的执行顺序与 setTimeout 不同。

📈 事件循环的流程图

event_loop_flowchart

此图展示了事件循环的完整流程，包括任务队列和微任务队列的处理顺序。

📚 常见应用场景

  • 定时器：如 setTimeout、setInterval
  • DOM 事件：如点击、输入等用户交互
  • 异步 I/O：如文件读写、网络请求

例如：

setTimeout(() => {
  console.log('宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('微任务');
});

输出顺序： 

微任务
宏任务

🌐 扩展阅读

想更深入探讨 JavaScript 性能优化？可以阅读 JavaScript 性能调优指南。