刘文柱

# 事件循环

# 事件循环的概念

事件循环 的概念非常简单。它是一个在 JavaScript 引擎等待任务，执行任务和进入休眠状态等待更多任务这几个状态之间转换的无限循环。

引擎的一般算法：

  1. 当有任务时：
    • 从最先进入的任务开始执行。
  2. 休眠直到出现任务，然后转到第 1 步。

当我们浏览一个网页时就是上述这种形式。JavaScript 引擎大多数时候不执行任何操作，它仅在脚本/处理程序/事件激活时执行。

# 任务示例：

  • 当外部脚本 <script src="..."> 加载完成时，任务就是执行它。
  • 当用户移动鼠标时，任务就是派生出 mousemove 事件和执行处理程序。
  • 当安排的（scheduled）setTimeout 时间到达时，任务就是执行其回调。
  • ……诸如此类。

设置任务 —— 引擎处理它们 —— 然后等待更多任务（即休眠，几乎不消耗 CPU 资源）。

一个任务到来时，引擎可能正处于繁忙状态，那么这个任务就会被排入队列。

多个任务组成了一个队列，即所谓的“宏任务队列”（v8 术语）：

例如，当引擎正在忙于执行一段 script 时，用户可能会移动鼠标而产生 mousemove 事件，setTimeout 或许也刚好到期，以及其他任务，这些任务组成了一个队列，如上图所示。

队列中的任务基于“先进先出”的原则执行。当浏览器引擎执行完 script 后，它会处理 mousemove 事件，然后处理 setTimeout 处理程序，依此类推。

两个细节：

  1. 引擎执行任务时永远不会进行渲染（render）。如果任务执行需要很长一段时间也没关系。仅在任务完成后才会绘制对 DOM 的更改。
  2. 如果一项任务执行花费的时间过长，浏览器将无法执行其他任务，例如处理用户事件。因此，在一定时间后，浏览器会抛出一个如“页面未响应”之类的警报，建议你终止这个任务。这种情况常发生在有大量复杂的计算或导致死循环的程序错误时。

# 宏任务和微任务

微任务仅来自于我们的代码。它们通常是由 promise 创建的：对 .then/catch/finally 处理程序的执行会成为微任务。微任务也被用于 await 的“幕后”，因为它是 promise 处理的另一种形式。

还有一个特殊的函数 queueMicrotask(func)，它对 func 进行排队，以在微任务队列中执行。

每个宏任务之后，引擎会立即执行微任务队列中的所有任务，然后再执行其他的宏任务，或渲染，或进行其他任何操作。

例如，看看下面这个示例：

setTimeout(() => alert("timeout"));

Promise.resolve().then(() => alert("promise"));

alert("code");
1
2
3
4
5

这里的执行顺序是怎样的？

  1. code 首先显示，因为它是常规的同步调用。
  2. promise 第二个出现，因为 then 会通过微任务队列，并在当前代码之后执行。
  3. timeout 最后显示，因为它是一个宏任务。

更详细的事件循环图示如下（顺序是从上到下，即：首先是脚本，然后是微任务，渲染等）：

微任务会在执行任何其他事件处理，或渲染，或执行任何其他宏任务之前完成。

这很重要，因为它确保了微任务之间的应用程序环境基本相同（没有鼠标坐标更改，没有新的网络数据等）

# 总结

  1. 从 宏任务 队列（例如 “script”）中出队（dequeue）并执行最早的任务。
  2. 执行所有 微任务：
    • 当微任务队列非空时：
      • 出队（dequeue）并执行最早的微任务。
  3. 执行渲染，如果有。
  4. 如果宏任务队列为空，则休眠直到出现宏任务。
  5. 转到步骤 1。

← 闭包 →