引言

你是否曾经对浏览器的事件循环感到困惑？这个看似复杂的概念，其实是前端开发中不可或缺的一部分。本文将通过生动的案例和通俗的语言，带你深入理解事件循环的核心机制，从此告别迷茫！

事件循环：前端开发的“隐形引擎”

JavaScript 是单线程的，这意味着它一次只能做一件事。然而，浏览器却能够流畅地处理各种异步任务，如点击事件、网络请求、定时器等。这一切都离不开事件循环（Event Loop）的调度机制。

事件循环的核心在于协调任务的执行、收集用户事件和调度子任务。它的流程可以分为四个关键步骤：

1. 宏任务调度：从任务队列（Task Queue）中取出一个宏任务并执行。
2. 微任务清空：清空微任务队列（Microtask Queue）。
3. 渲染判断：判断是否需要渲染（UI Render）。
4. 进入下一循环：重复上述步骤，直到所有队列为空。

宏任务与微任务：谁先谁后？

很多人误以为微任务会在宏任务之后执行，但实际上，微任务是在每一个宏任务执行完毕后立即执行的，直到微任务队列清空为止。例如：

console.log("1. 主线程开始");
setTimeout(() => {
    console.log("4. 宏任务1");
    Promise.resolve().then(() => console.log("5. 微任务2"));
}, 0);
Promise.resolve().then(() => {
    console.log("3. 微任务1");
    setTimeout(() => console.log("6. 宏任务2"), 0);
});
console.log("2. 主线程结束");

输出顺序将是：1 → 2 → 3 → 4 → 5 → 6。

宏任务与微任务的执行顺序

• 微任务优先级：微任务总是在当前宏任务执行完毕后立即执行，包括微任务中触发的微任务。
• setTimeout 的陷阱：很多人认为 setTimeout(fn, 0) 会立即执行，但实际上它会进入任务队列，等待当前主线程和微任务全部执行完毕后才执行。

渲染与事件循环：谁在掌控？

浏览器会合并 DOM 操作，并在合适的时机更新视图。requestAnimationFrame 就是在这一阶段执行的，确保动画流畅。进入下一循环后，事件循环会重复上述步骤，直到所有队列为空。

常见误区与真相

• 微任务在宏任务之后执行：错！微任务在每一个宏任务执行完毕后立即执行。
• setTimeout(fn, 0)会立即执行：错！它会进入任务队列，等待当前主线程和微任务全部执行完毕后才执行。
• 所有异步任务都是宏任务：错！requestAnimationFrame 和 requestIdleCallback 有独立队列，不属于宏任务或微任务。

最佳实践：写出高性能代码

• 长任务拆分：避免阻塞主线程，使用 setTimeout 或 queueMicrotask 分解任务。
• 慎用同步操作：如 alert、同步 XHR 会阻塞事件循环。
• 优先使用微任务：如用 Promise 代替 setTimeout 处理高优先级任务。

总结

事件循环的本质是浏览器协调异步任务的调度机制。理解其核心流程（宏任务 → 微任务 → 渲染 → 循环），能帮助你写出更高效、更可控的前端代码。记住：微任务在每个宏任务后立即执行，而渲染时机由浏览器优化决定。

参考资料

• HTML Living Standard: Event Loops
• MDN Web Docs: Event Loop

希望这篇文章能帮助你彻底搞懂浏览器事件循环，让你的前端开发之路更加顺畅！如果你觉得这篇文章对你有帮助，欢迎关注我的公众号（鱼樱AI实验室），获取更多干货内容！