深入JavaScript_事件循环机制解析

JavaScript通过事件循环实现异步，其核心是执行栈与任务队列的协作。1. 同步代码先执行；2. 异步回调根据类型进入宏任务或微任务队列；3. 当前宏任务结束后，立即清空微任务队列；4. 然后进入下一宏任务并可能触发DOM渲染。例如：console.log('1')和'4'同步输出；setTimeout为宏任务延迟执行；Promise.then为微任务在当前宏任务后立即执行，故输出顺序为1→4→3→2。

JavaScript 是单线程语言，这意味着它一次只能执行一个任务。然而，我们日常使用中却能处理异步操作，比如定时器、HTTP 请求、DOM 事件等，这背后的功臣就是 事件循环（Event Loop）。它协调着代码的执行顺序，使得非阻塞操作得以实现。下面深入解析 JavaScript 的事件循环机制。

执行栈与任务队列

JavaScript 引擎在执行代码时，会维护一个执行栈（Call Stack），用于记录当前正在执行的函数调用。当函数被调用时，它会被压入栈顶；函数执行完毕后，从栈中弹出。

然而，异步操作（如 setTimeout、Promise、fetch）不会立即执行回调，而是交由浏览器的 Web API 处理。这些 API 在满足条件后（例如延迟时间到达），将回调函数推入任务队列（Task Queue）。

事件循环的作用就是持续监听执行栈是否为空。一旦为空，就从任务队列中取出最早进入的回调，推入执行栈执行。

立即学习“Java免费学习笔记（深入）”；

宏任务与微任务的区别

事件循环不仅管理单一队列，还区分了两种任务类型：宏任务（Macro Task） 和 微任务（Micro Task）。

• 宏任务 包括：整体代码块、setTimeout、setInterval、I/O、UI 渲染等。
• 微任务 包括：Promise.then/catch/finally 回调、MutationObserver、queueMicrotask 等。

关键区别在于执行时机：

• 每次事件循环迭代开始时，会先执行一个宏任务（比如主线程代码或 setTimeout 回调）。
• 该宏任务执行完后，会清空所有当前可用的微任务队列，即连续执行所有微任务，直到微任务队列为空。
• 之后才开始下一轮事件循环，取下一个宏任务。

这意味着微任务总是在当前宏任务结束后立即执行，且优先级高于下一个宏任务。

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

84

查看详情

实际执行顺序示例

来看一段经典代码，理解事件循环的实际表现：

输出顺序是：1 → 4 → 3 → 2。

解释如下：

• '1' 和 '4' 是同步代码，直接输出。
• setTimeout 回调是宏任务，进入宏任务队列。
• Promise.then 是微任务，进入微任务队列。
• 同步代码执行完毕后，事件循环检查微任务队列，执行 then 回调输出 '3'。
• 微任务清空后，进入下一轮宏任务，执行 setTimeout 输出 '2'。

DOM 更新与渲染时机

浏览器的 UI 渲染也是一个宏任务，通常在事件循环的特定阶段进行。这意味着：

• 即使你修改了 DOM，页面也不会立即重绘。
• 渲染一般发生在宏任务之间，前提是存在视觉变化且没有被浏览器优化跳过。
• 微任务不会触发渲染，它们在渲染前全部执行完毕。

如果需要在 DOM 更新后执行逻辑，可使用 requestAnimationFrame 或将操作延迟到下一个宏任务（如 setTimeout(() => {}, 0)）。

基本上就这些。事件循环虽不复杂，但理解宏任务与微任务的执行顺序，对写出可预测的异步代码至关重要。掌握它，才能避免“为什么 Promise 回调比 setTimeout 快”这类困惑。

以上就是深入JavaScript_事件循环机制解析的详细内容，更多请关注php中文网其它相关文章！