JavaScript事件循环：宏任务微任务执行顺序

理解事件循环与任务队列

JavaScript 是单线程语言，同一时间只能执行一段代码。为了处理 I/O、定时器和网络请求等耗时操作，浏览器引入了事件循环（Event Loop）机制。核心组件包括调用栈（Call Stack）、宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。调用栈负责执行同步代码，遵循后进先出原则；当同步代码执行完毕，调用栈清空后，事件循环会开始工作。它首先检查微任务队列，将其中所有任务依次推入调用栈执行，直到微任务队列为空；随后从宏任务队列中取出一个任务执行，执行完毕后再次检查微任务队列。这种设计使得单线程 JavaScript 能够通过非阻塞的异步回调处理并发任务，既避免了多线程的上下文切换开销，又保证了 UI 渲染的连贯性。浏览器环境下的事件循环模型严格遵循“同步优先、微任务清空、宏任务轮询”的调度规则，是理解前端异步编程的基石。

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

在浏览器环境中，任务执行顺序遵循严格的优先级：当前执行上下文中的同步代码最先运行，随后立即清空当前微任务队列，最后才进入下一个宏任务。宏任务通常包括 setTimeout、setInterval、I/O 操作、UI 渲染以及 MessageChannel 等，它们代表较大的、独立的工作单元。微任务则主要包括 Promise.then/catch/finally、queueMicrotask 以及 MutationObserver 的回调，它们用于在当前任务结束后、渲染前执行高优先级的状态更新。例如，当 setTimeout 的回调被放入宏任务队列时，它必须等待当前调用栈清空且微任务队列全部执行完毕后才会被调度。而 Promise.then 注册的回调会直接进入微任务队列，确保在当前宏任务结束前被立即处理。开发者可以通过 queueMicrotask 显式创建微任务，从而精确控制异步逻辑的执行时机，避免不必要的渲染延迟。

用代码验证经典执行顺序

通过以下最小示例可直观验证执行顺序：console.log('同步1'); setTimeout(() => console.log('宏任务1'), 0); Promise.resolve().then(() => console.log('微任务1')); console.log('同步2');。运行后控制台输出顺序为：同步1、同步2、微任务1、宏任务1。这印证了同步代码优先执行，随后清空微任务，最后才调度宏任务。进一步加入嵌套场景：在微任务中创建宏任务，如 Promise.resolve().then(() => { console.log('微任务中创建宏任务'); setTimeout(() => console.log('宏任务2'), 0); });，该宏任务会被放入下一轮宏任务队列，不会打断当前微任务清空流程。反之，在宏任务中创建微任务，如 setTimeout(() => { console.log('宏任务中创建微任务'); Promise.resolve().then(() => console.log('微任务2')); }, 0);，该微任务会在当前宏任务执行完毕后、下一个宏任务开始前被立即执行。通过逐步拆解日志输出，开发者可牢固掌握事件循环的轮转规则。

常见误区与实际开发避坑

许多开发者误以为“Promise 一定比 setTimeout 先执行”，但这仅在两者处于同一事件循环轮次时成立。若 setTimeout 的延迟时间极短且先于 Promise 注册，或 Promise 处于后续的宏任务中，则顺序会发生变化。此外，微任务虽优先级高，但若在单次循环中无限创建微任务（如递归调用 queueMicrotask），会导致微任务队列永远无法清空，进而阻塞主线程与页面渲染，引发界面卡顿甚至浏览器无响应警告。不同宿主环境的事件循环实现也存在差异，例如 Node.js 的 process.nextTick 优先级高于 Promise，且其宏任务队列按阶段划分，与浏览器模型不完全一致。在实际开发中，分析异步顺序的通用方法是：绘制执行时间轴，标记同步代码、微任务入队时机与宏任务入队时机，严格遵循“当前任务结束 -> 清空微任务 -> 执行一个宏任务 -> 再次清空微任务”的循环逻辑进行推演，避免凭直觉猜测。