事件循环(Event Loops)再解

事件循环(Event loops)

基本概念

每个代理都是由 事件循环驱动的，事件循环负责收集用事件（包括用户事件以及其他非用户事件等）、对任务进行排队以便在合适的时候执行回调。然后它执行所有处于等待中的 JavaScript 任务（宏任务），然后是微任务，然后在开始下一次循环之前执行一些必要的渲染和绘制操作。

事件循环的职责

• 收集事件
• 维护任务队列
• 维护微任务队列
• 调用渲染引擎

一次完整的事件循环（运行环境Chrome 87）

• 事件循环开始
• 执行任务队列中的第一个任务
• 依次执行微任务队列中所有的微任务
• 第一个任务退出任务队列
• 必要的渲染和绘制操作
• 重复以上步骤直到任务队列清空
• 事件循环结束

这里的任务队列指的是事件循环开始迭代时的任务队列

在事件循环开始迭代之后加入到队列中的任务需要在下一次迭代开始之后才会被执行。

宏任务(Macrotasks)和微任务(Microtasks)

Macrotasks通常指的是Tasks（下文有介绍），Macrotasks在标准上是查不到任何相关描述的，这个概念从何而来不得而知，但是业界普遍承认这个概念以跟Microtasks做区分。

而Microtasks是写入HTML Standard的标准，并且在浏览器环境有相关api queueMicrotask。

实际上浏览器中只有任务(Tasks)和微任务(Microtasks)之分，下面来讲讲他们的概念和区别。

任务(Tasks)和微任务(Microtasks)的概念和关系

任务(Tasks)

基本概念

一个 任务 就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在 任务队列（task queue）上被调度。

任务的添加

在以下时机，任务会被添加到任务队列：

• 一段新程序或子程序被直接执行时（比如从一个控制台，或在一个