你还在为事件循环发愁吗？

叫苏珊的_ikun
276 阅读5分钟

事件循环：微任务和宏任务

浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于事件循环的。

理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要。

在本章中，我们首先介绍事件循环工作方式的理论细节，然后介绍该知识的实际应用。

事件循环

事件循环 的概念非常简单。它是一个在 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. code 首先显示，因为它是常规的同步调用。
  2. promise 第二个出现，因为 then 会通过微任务队列，并在当前代码之后执行。
  3. timeout 最后显示，因为它是一个宏任务。

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

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

如果我们想要异步执行（在当前代码之后）一个函数，但是要在更改被渲染或新事件被处理之前执行，那么我们可以使用 queueMicrotask 来对其进行安排（schedule）。

总结

更详细的事件循环算法（尽管与 规范 相比仍然是简化过的）：

  1. 从 宏任务 队列（例如 “script”）中出队（dequeue）并执行最早的任务。

  2. 执行所有 微任务：

    • 当微任务队列非空时：

      • 出队（dequeue）并执行最早的微任务。

  3. 如果有变更，则将变更渲染出来。

  4. 如果宏任务队列为空，则休眠直到出现宏任务。

  5. 转到步骤 1。

安排（schedule）一个新的 宏任务：

  • 使用零延迟的 setTimeout(f)。

它可被用于将繁重的计算任务拆分成多个部分，以使浏览器能够对用户事件作出反应，并在任务的各部分之间显示任务进度。

此外，也被用于在事件处理程序中，将一个行为（action）安排（schedule）在事件被完全处理（冒泡完成）后。

安排一个新的 微任务：

  • 使用 queueMicrotask(f)。
  • promise 处理程序也会通过微任务队列。

在微任务之间没有 UI 或网络事件的处理：它们一个立即接一个地执行。

所以，我们可以使用 queueMicrotask 来在保持环境状态一致的情况下，异步地执行一个函数。

avatar
文章
阅读
粉丝