JavaScript事件循环严格遵循“宏任务→清空全部微任务→下一宏任务”节奏：先执行一个宏任务，再连续执行所有微任务直至队列为空，最后浏览器可能渲染并取下一个宏任务。
JavaScript 事件循环的核心，是协调同步代码与异步回调的执行节奏。它不是“轮流执行所有任务”，而是严格遵循“一个宏任务 → 清空全部微任务 → 下一个宏任务”的固定节奏。
事件循环的实际执行步骤
每次循环只做三件事，顺序不可颠倒：
- 执行当前宏任务（比如一段 script、一个 setTimeout 回调、一次点击事件处理函数）
- 立即检查并**连续执行完所有已存在的微任务**（Promise.then、queueMicrotask、MutationObserver 等），新产生的微任务也会被追加并执行，直到队列为空
- 浏览器可能进行 UI 渲染（如 DOM 更新可见），然后从宏任务队列中取出**下一个最老的宏任务**，开始下一轮
宏任务和微任务的关键区别
区别不在“谁更异步”，而在于**调度时机、来源归属和执行粒度**：
- 宏任务由宿主环境（浏览器或 Node.js）发起，代表相对独立、耗时可能较长的工作单元。例如：setTimeout/setInterval、I/O 回调、DOM 事件（click）、requestAnimationFrame、整体 script 标签代码
- 微任务由 JS 引擎自身调度，优先级更高，必须在当前宏任务结束后“立刻清空”。例如：Promise.then/catch/finally、queueMicrotask()、MutationObserver 回调
- 宏任务队列按 FIFO（先进先出）每次只取一个；微任务队列则“一来就全干完”，不给中间插入其他任务的机会
为什么这个顺序很重要
它直接决定代码输出结果和逻辑可靠性：
立即学习“Java免费学习笔记（深入）”；
- 同步代码 → 微任务 → 宏任务，是默认执行流。比如
console.log('start')、Promise.resolve().then(() => console.log('p'))、setTimeout(() => console.log('t'), 0)的输出一定是 start → p → t - 微任务会阻塞 UI 渲染——如果在 Promise.then 里递归调用
queueMicrotask，页面会卡住，因为渲染要等微任务队列彻底清空 - 想让出主线程、允许页面更新？用
setTimeout(fn, 0)，而不是反复推微任务
常见误区提醒
别被“0 毫秒”误导：
-
setTimeout(fn, 0)不是“马上执行”，只是尽快放入宏任务队列，要等当前宏任务 + 所有微任务都结束才轮到它 -
Promise.resolve().then()也不是“稍后执行”，而是“同步代码一结束、立刻执行”，哪怕只有几微秒延迟 - script 整体本身就是一个宏任务——它是整个事件循环的第一个宏任务
