事件循环（Event Loop）是JavaScript运行机制的核心，它决定了异步编程的实现方式。理解事件循环对于掌握JavaScript性能优化和并发模型至关重要。

事件循环的基本概念

JavaScript是单线程语言，但通过事件循环机制实现了非阻塞的异步处理。其核心在于任务队列与回调函数的协作：

  1. 主线程：负责执行同步代码和触发异步操作（如setTimeout、fetch）
  2. 任务队列：存放等待执行的回调函数
  3. 微任务队列：优先级更高的任务（如Promise.then、MutationObserver）

📌 事件循环不断从任务队列中取出任务执行，而微任务会在当前任务完成后立即执行

事件循环的执行流程

  1. 执行同步代码
  2. 执行微任务（Microtask）
  3. 执行宏任务（Macrotask）
  4. 重复上述流程

例如：

console.log('Start'); // 同步任务
setTimeout(() => {
  console.log('Timeout'); // 宏任务
}, 0);
Promise.resolve().then(() => {
  console.log('Promise'); // 微任务
});
console.log('End'); // 同步任务

输出顺序：Start → End → Promise → Timeout
（微任务优先级高于宏任务）

微任务 vs 宏任务

类型 触发时机 执行时机 示例
微任务 同步代码执行完成后 当前事件循环周期 Promise.then、process.nextTick
宏任务 事件循环开始前 下一个事件循环周期 setTimeout、setInterval

实际应用中的注意事项

  • 避免在同步代码中阻塞太长时间
  • 合理使用requestAnimationFrame优化渲染性能
  • 理解微任务队列的执行顺序（如async/await的底层原理）

扩展阅读

若想进一步了解JavaScript异步编程，可参考：
JavaScript异步函数详解
或探索更深入的回调函数机制

javascript_event_loop
micro_task_vs_macro_task