事件循环（Event loop）：微任务（microtasks）和宏任务（macrotasks）

意译 https://javascript.info/event-loop

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

理解事件循环的工作原理对于设计正确的架构以及优化架构都非常重要。

Event Loop

event loop的概念非常简单。以下是伪码说明

for(;;) {
    Java script Engine 等待任务
    Java script Engine 执行任务
    Java script Engine 休眠
}

引擎的算法如下：

1. 当有任务时：
   • 从最老的任务开始执行
2. 当没有任务时休眠，一旦有任务到来，执行1

当我们在浏览网页时，JavaScript引擎大部分时间啥也不做，只有当一个script或者一个控件handler或者一个Event被激活时，引擎才运行。

以下是任务（task）的例子

• 当浏览器加载一个外部脚本

  通过使用setTimeout将大任务拆分成子任务，我们可以在执行的任务的同时展示任务进度。

  在事件发生后，执行某个任务

  如果我们想在某个事件处理函数（event handler）执行完毕后，再执行某个任务，例如（分发自定义事件（Dispatching custom events）），我们也可以使用setTimeout（延时为0）进行包装

  menu.onclick = function() {
    // …
  
    // create a custom event with the clicked menu item data
    let customEvent = new CustomEvent(“menu-open”, {
      bubbles: true
    });
  
    // dispatch the custom event asynchronously
    setTimeout(() => menu.dispatchEvent(customEvent));
  };
  

  Macrotasks(宏任务) and Microtasks（微任务）

  宏任务如前文所述是当JavaScript Engine 执行某个任务处于忙状态时，此时其它任务到达时排队形成的任务队列，这些任务包括了：
  * 浏览器加载的JS脚本
  * 事件处理函数
  * 定时任务（setTimout，setInterval ，setImmediate）
  * IO处理（网络请求、磁盘读写）
  * UI 渲染

  微任务仅仅来自于我们的代码。它们通常通过promises创建：
  * 执行 .then/catch/finally的处理流程就是一个个微任务。
  * await同样也是对微任务的包装
  * queueMicrotask(func)函数会将func加入到微任务的队列中执行。

  JavaScript 引擎在执行每一个宏任务之后，会立刻执行微任务队列中所有任务之后，再执行宏队列中的其它任务或者进行渲染

  microtasks.png

  举个例子

  setTimeout(() => alert(“timeout”));
  
  Promise.resolve()
    .then(() => alert(“promise”));
  
  alert(“code”);
  

  以上代码alert的顺序是：
  1. code首先被show出
  2. 因为then是一个微任务（microtask），所以 promise被show出
  3. 最后setTimeout是另一个宏任务（macrotask）。最后被执行。timeout被show出。

  下面是另一个例子 说明 宏任务（macrotask）执行后，JavaScript引擎会立即执行微任务，然后再进行渲染或执行别的宏任务

  因为queueMicrotask将count加入到微任务队列中，所以JavaScript引擎会把所有的count执行完毕再进行渲染，因此用户看到的进度指示是最后的数字，并不会看到中间过程的数字。