前端中的事件循环（Event Loop）

1. 什么是事件循环？

JavaScript 是单线程语言，同一时间只能执行一个任务。

为了处理异步操作，JavaScript 使用事件循环机制，协调同步任务、微任务和宏任务的执行顺序。

2. 任务类型

常见任务分为两类：

• 宏任务（Macrotask）：setTimeout、setInterval、I/O、UI 事件等。
• 微任务（Microtask）：Promise.then、queueMicrotask、MutationObserver 等。

3. 执行顺序

基本执行流程：

1. 执行同步代码。
2. 执行当前任务产生的所有微任务。
3. 浏览器有机会进行页面渲染。
4. 执行下一个宏任务。
5. 重复以上过程。

4. 经典示例

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

输出结果：

1
4
3
2

原因：

• 1 和 4 是同步代码，优先执行。
• 3 属于微任务，优先于下一个宏任务执行。
• 2 属于宏任务，最后执行。

5. 实际应用

理解事件循环有助于解决很多前端问题：

• 异步请求的执行顺序。
• Promise 链式调用。
• 定时器执行时机。
• 页面渲染与性能优化。
• 避免长时间同步任务阻塞页面。

总结

事件循环是 JavaScript 异步编程的核心机制。

掌握同步任务、微任务和宏任务的执行顺序，可以帮助我们更准确地理解 JavaScript 的运行行为。