17370845950

Event Loop是JavaScript实现异步的核心机制，通过“分时+排队”协调调用栈、宏任务队列与微任务队列，确保单线程下DOM安全与交互响应；其执行顺序为：同步代码→清空微任务→取一个宏任务→重复。

Event Loop（事件循环）是 JavaScript 实现异步行为的核心机制，它不是浏览器或 Node.js 的附加功能，而是 JS 单线程模型下“看起来能同时做多件事”的根本原因。理解它，就等于看清了 代码为什么不是按书写顺序执行、Promise 为什么比 setTimeout 先输出、页面为何不卡死 这些日常现象背后的逻辑。

Event Loop 解决的根本矛盾

JavaScript 是单线程语言——同一时刻只能执行一个任务。这带来两个现实问题：

• DOM 操作必须安全：如果两个线程同时增删同一个元素，浏览器无法判断该听谁的
• 用户交互不能中断：一段耗时的同步计算（比如遍历十万条数据）若阻塞主线程，页面就完全失去响应

Event Loop 就是在不引入多线程的前提下，用“分时+排队”的方式化解这两个问题：把耗时操作交出去（如网络请求、定时器），等结果回来再排个队，等主线程空了再处理。

它由三部分协同工作

调用栈（Call Stack）：存放正在执行的同步函数，后进先出（LIFO）。函数调用就入栈，执行完就出栈。

任务队列（Task Queue）：分为两类：

• 宏任务队列：setTimeout、setInterval、I/O、UI 渲染、script 整体代码块
• 微任务队列：Promise.then/catch/finally、MutationObserver、queueMicrotask

事件循环本身：持续检查——同步代码执行完 → 清空所有微任务 → 取一个宏任务执行 → 再清空微任务 → 如此往复。

为什么它是理解异步的关键？

因为几乎所有“非立即执行”的行为，都依赖 Event Loop 的调度规则：

• Promise 回调总在当前同步代码之后、下一个 setTimeout 之前运行（微任务优先级高于宏任务）
• 多个连续的 .then() 会一次性执行完，不会被中间插入的 setTimeout 打断
• requestAnimationFrame 在渲染前触发，而 setTimeout 在渲染后才可能执行，这也由 Event Loop 阶段决定
• await 实际是 Promise 的语法糖，它的暂停和恢复，底层靠的就是微任务排队

不看 Event Loop，你只能死记“Promise 比 setTimeout 快”；看了它，你就明白这是调度策略使然，不是魔法。

一个典型执行顺序示例

这段代码：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

输出一定是：1 → 4 → 3 → 2。原因很清晰：

• 1 和 4 是同步代码，立刻进栈执行
• setTimeout 是宏任务，进宏任务队列，等待下一轮循环
• Promise.then 是微任务，进微任务队列，本轮同步结束后立即执行
• 微任务队列清空后，才轮到宏任务队列里的 setTimeout