JavaScript事件循环是单线程下调度异步任务的核心机制，通过执行栈、宏任务队列和微任务队列协同工作：先执行同步代码，再清空全部微任务，最后取一个宏任务进入下一轮；微任务（如Promise.then）总在当前宏任务结束前执行完毕，宏任务（如setTimeout）则需等待下一轮循环。

JavaScript 事件循环是单线程环境下调度异步任务的核心机制。它不靠多线程并发，而是通过“执行栈 + 两个队列（宏任务队列、微任务队列）+ 循环检查”的方式，让异步代码有序、非阻塞地运行。

事件循环的基本流程

主线程按以下固定节奏运转：

• 先执行当前宏任务中的所有同步代码（比如整个 script 脚本、一次点击回调）
• 同步代码执行完，立即清空当前所有的微任务（Promise.then、queueMicrotask、MutationObserver 等）——一个不剩，全部执行完才停
• 微任务队列空了，再从宏任务队列中取出**第一个**任务（如 setTimeout 回调、下一次用户点击、I/O 完成通知），开始下一轮
• 重复上述三步，持续循环

宏任务和微任务的关键区别

区别不在“谁更先进”或“谁更快”，而在于执行时机和优先级规则：

• 宏任务：代表一次相对完整、独立的执行单元。例如：整体 script 标签内容、setTimeout/setInterval 回调、用户事件（click、input）、fetch 响应处理、页面渲染（浏览器端）
• 微任务：代表必须在当前宏任务结束前立刻完成的小型后续操作。例如：Promise.then/catch/finally 回调、queueMicrotask() 注册的函数、MutationObserver 回调、Node.js 中的 process.nextTick()
• 即使 setTimeout 设为 0ms，它的回调仍是宏任务，一定排在本轮所有微任务之后
• 一个宏任务里可以产生多个微任务，它们会累积到微任务队列，等本轮同步代码一结束就全执行

为什么这样设计

微任务优先级更高，是为了保障关键逻辑的及时响应：

• Promise 链式调用需要尽快衔接，避免被 UI 渲染或定时器打断
• MutationObserver 要在 DOM 更新后、页面重绘前捕获变化，确保视图与数据一致
• 避免开发者手动用 setTimeout(0) 模拟“下一轮”，减少不确定性

一个典型执行顺序示例

这段代码的输出顺序是 1 → 4 → 10 → 7 → 8 → 9 → 3 → 2：

• 1、4、10、7 是同步代码，按序输出
• 8、9 是 Promise.then 的微任务，在同步结束后立即执行（注意 8 里又注册了 9）
• 3 是 queueMicrotask，也是微任务，排在所有 Promise.then 之后（同属微任务队列，先进先出）
• 2 是 setTimeout，属于宏任务，要等本轮彻底结束、进入下一轮事件循环才执行