很多前端开发者在面试或实际开发中都会被JavaScript的“异步执行机制”绕晕。为什么setTimeout里的代码总是比Promise晚执行今天我们不背八股文用最通俗的语言把事件循环Event Loop彻底讲透。1. 为什么需要事件循环首先要明确一个核心概念JavaScript是一门单线程语言。这意味着同一时间只能做一件事。如果我们在主线程上执行一个耗时3秒的网络请求整个页面就会卡死3秒。为了解决这个问题浏览器引入了事件循环机制将耗时操作交给Web APIs处理主线程则继续执行后续代码。2. 宏任务与微任务的“插队”游戏事件循环的核心在于区分两种任务队列宏任务MacroTask包括整体代码块、setTimeout、setInterval、I/O操作等。微任务MicroTask包括Promise.then、MutationObserver、queueMicrotask等。它们的执行优先级是微任务 宏任务。3. 一次完整的事件循环流程让我们来看一个经典的执行顺序主线程执行同步代码第一个宏任务。遇到微任务如Promise.then将其放入微任务队列。遇到宏任务如setTimeout将其放入宏任务队列。同步代码执行完毕后主线程立即清空当前所有的微任务队列。微任务清空后渲染引擎可能进行页面渲染。从宏任务队列中取出一个任务执行然后再次回到第4步。4. 总结与避坑指南理解了上述机制我们就能明白Promise的回调之所以优先于setTimeout是因为它属于微任务会在当前宏任务结束后、下一个宏任务开始前被“插队”执行。在实际开发中我们要尽量避免在微任务中执行极其耗时的同步操作否则会导致页面渲染被无限期推迟造成严重的卡顿。希望这篇文章能帮你彻底打通异步编程的任督二脉如果觉得有用别忘了点赞收藏我们下期再见。