【HTML】HTML 事件循环处理模型（Event Loop）

HTML 事件循环（Event Loop）：让单线程的 JavaScript 动起来

HTML 事件循环（Event Loop）是浏览器中用于解决 JavaScript 单线程运行时不会阻塞的一种机制，它协调着事件、用户交互、脚本执行、UI 渲染和网络请求等各种任务。 简单来说，它是一个持续不断的处理过程，确保了即使在执行耗时操作时，浏览器也能保持对用户输入的响应。

为什么需要事件循环？

JavaScript 的核心特点之一是单线程，即在同一时间只能执行一件任务。 这种设计简化了编程，避免了多线程环境下复杂的同步问题。然而，这也带来一个挑战：如果一个任务执行时间过长（例如，一个复杂的计算或者一个网络请求），整个浏览器界面就会被阻塞，无法响应用户的点击、滚动等操作，导致“假死”现象。

事件循环机制的出现正是为了解决这个问题。它引入了异步处理的概念，将耗时的任务放入一个“任务队列”中，等待主线程空闲时再执行，从而保证了主线程能够及时处理用户的交互。

事件循环处理模型最新解释（2025）

在最新的 WHATWG HTML Living Standard（目前实际上的 Web 标准）中，您将找不到“宏任务 (macrotask)”这个术语。虽然这个词在开发者社区和许多教程中仍然被广泛使用，但官方规范已经转向了更精确、更详细的模型。

为什么不再使用“宏任务”这个术语？

随着浏览器变得越来越复杂，简单地将所有异步任务分为“宏任务”和“微任务”两大类已经无法准确描述浏览器的实际行为了。旧的模型暗示所有“宏任务”都位于一个单一的队列中，并且先进先出地被处理，但这并不完全正确。

事实上，浏览器需要处理多种不同类型的任务，并且可能需要根据情况优先处理某些任务。例如，用户交互事件（如点击、滚动）的优先级应该高于一个 setTimeout 的回调，以便让页面保持响应。

因此，为了更精确地定义事件循环，官方规范放弃了“宏任务”这个笼统的术语。

最新的 Event Loop 解释

根据最新的 WHATWG HTML 标准，事件循环的模型是这样描述的：

1. 任务 (Task)：取代了“宏任务”的说法。一个任务指的是由标准机制安排的任何 JavaScript 代码，例如：

   • 解析 HTML
   • 执行 script 标签中的顶层代码
   • setTimeout 或 setInterval 的回调
   • 用户交互事件（点击、滚动等）的回调
   • I/O 操作和网络请求的回调

2. 任务队列 (Task Queues)：这是最核心的变化。一个事件循环拥有一个或多个任务队列。 任务队列不再是单一的队列，而是一个集合。不同的任务源 (task sources) 会有不同的任务队列。 例如，可能有一个用于用户交互事件的队列，一个用于计时器回调的队列等。

   • 规范原文：“一个事件循环有一个或多个任务队列。任务队列是任务的集合，而不是队列，因为事件循环处理模型是从选定的队列中获取第一个可运行的任务，而不是对第一个任务执行出队操作。”

3. 微任务队列 (Microtask Queue)：这个概念保持不变。微任务队列仍然是独立于所有任务队列的、具有更高优先级的队列。 Promise.then()、MutationObserver 和 queueMicrotask() 的回调会进入这个队列。

最新的事件循环处理流程

最新的事件循环处理模型可以这样理解：

1. 选择任务执行：事件循环从多个任务队列中选择一个可运行的任务 (Task) 来执行。规范允许浏览器根据自身情况决定从哪个任务队列中选取任务，这就是浏览器能够进行优先级调度的依据（例如，优先处理用户输入相关的任务队列）。

2. 执行所有微任务：当选定的任务执行完毕，并且调用栈为空后，事件循环会立即处理微任务队列中的所有微任务。这个过程被称为“微任务检查点 (microtask checkpoint)”。

   • 如果在执行微任务的过程中，又向微任务队列中添加了新的微任务，那么这些新的微任务也会在当前这个检查点被立即执行，直到微任务队列被完全清空。

3. 更新渲染 (Update the rendering)：在微任务队列被清空后，浏览器会进行判断，决定是否需要执行 UI 渲染（重绘和重排）。这个步骤不是每次循环都必须执行，浏览器会根据刷新率、页面性能等因素来优化。

4. 循环往复：完成渲染（或决定不渲染）后，事件循环会回到第一步，准备从任务队列中选择下一个任务。

总结与对比

核心要点：

• 告别“宏任务”：官方术语是任务 (Task)。
• 单一队列变为多个队列：事件循环拥有多个任务队列 (Task Queues)，浏览器可以从中选择任务，这为任务优先级调度提供了理论基础。
• 微任务优先级不变：微任务仍然拥有最高优先级，会在每个任务执行完毕后立即清空整个微任务队列。
• “宏任务”仍是有效的学习工具：虽然术语在规范中改变了，但在日常开发和学习中，将“任务 (Task)”理解为“宏任务”来与“微任务”进行区分，仍然是一个非常有效且广为接受的心智模型。

事件循环的核心组成部分

事件循环模型主要由以下几个关键部分组成：

• 调用栈（Call Stack）: 这是一个后进先出（LIFO）的数据结构，用于存储和管理正在执行的函数。 当一个函数被调用时，它会被推入栈顶；当函数执行完毕返回时，它会从栈顶被弹出。 所有的同步任务都在调用栈中执行。
• 堆（Heap）: 用于存储对象、函数等引用类型的数据。
• 任务队列（Task Queue / Macrotask Queue）: 这是一个先进先出（FIFO）的队列，用于存放待处理的异步任务的回调函数。 这些任务通常被称为宏任务（Macrotask）。 常见的宏任务包括：
  • script（整个脚本代码）
  • setTimeout 和 setInterval 回调
  • I/O 操作
  • UI 渲染
  • 用户的交互事件（如点击、鼠标移动）
• 最新标准：明确一个事件循环拥有一个或多个任务队列 (Task Queues)。[1] 这是一个集合，而不是一个单一的队列。不同的任务源 (Task Sources) 对应不同的任务队列。例如，可以有一个用于处理用户交互（如点击）的任务队列，一个用于处理计时器（setTimeout）回调的任务队列等。
  • 为什么这个变化很重要？
    这个改变从根本上解释了浏览器如何实现任务优先级调度。旧的单一队列模型无法解释为什么用户的点击事件有时会比一个已经到期的 setTimeout 更快得到响应。最新的模型允许浏览器在每一轮事件循环中，根据自身的逻辑（例如，为了保证页面的响应性）选择一个任务队列，并从那个队列中取出一个任务来执行。这就为优先处理用户输入等高优任务提供了理论依据。
• 微任务队列（Microtask Queue）: 这是一个优先级更高的任务队列，用于存放待处理的微任务（Microtask）。 微任务通常是需要在当前任务执行后立即执行的任务。 常见的微任务包括：
  • Promise.then(), Promise.catch(), Promise.finally()
  • MutationObserver

事件循环的处理流程（2025新标准发布前表述）

浏览器中的事件循环遵循一个精确且持续的流程，可以概括为以下几个步骤：

1. 执行同步代码：首先，执行全局的 script 代码，这被视为第一个宏任务。 所有同步代码会依次进入调用栈并执行。
2. 执行一个宏任务：当调用栈为空时，事件循环会检查宏任务队列。如果队列中有任务，则取出队列头部的第一个任务，并将其回调函数推入调用栈中执行。
3. 执行所有微任务：在该宏任务执行完毕后，调用栈变为空。此时，事件循环会立即检查微任务队列。如果微任务队列不为空，它会依次执行队列中所有的微任务，直到微任务队列清空为止。 如果在执行微任务的过程中又产生了新的微任务，那么这些新的微任务也会被添加到队列的末尾并在此轮循环中被执行。
4. UI 渲染：在所有微任务执行完毕后，浏览器会进行一次UI渲染的判断。浏览器会根据屏幕刷新率和页面性能等因素来决定是否需要重新渲染页面。这个步骤不是每次事件循环都必然会发生。
5. 循环往复：完成渲染后，事件循环会回到第二步，继续从宏任务队列中取出下一个任务执行。这个过程会不断重复，从而形成“事件循环”。

总结来说：每一次事件循环都始于一个宏任务，执行完后清空所有的微任务，然后可能进行UI渲染，接着开始下一次循环去处理下一个宏任务。这个模型保证了异步任务能够被有序地处理，同时也确保了高优先级的任务（微任务）能够得到及时的响应。

参考：

• whatwg.org
• medium.com
• stackoverflow.com
• javascript.info
• greatfrontend.com
• 2025 WEB前端W3C Event Loop （取消了宏任务的说法）
• frontend-almanac.com