JavaScript异步机制

最近在忙着写React源码系列，写到第四篇——React Fiber，这篇还需要好好研究下才能写(๑•ᴗ•๑)，今天就写一篇Event Loop的文章吧，解释一下js的异步机，如下图：

机制图解

我们经常会听到引擎和runtime，它们的区别是什么呢？

引擎：解释并编译代码，让它变成能交给机器运行的代码（runnable commands）。

runtime：就是运行环境，它提供一些对外接口供Js调用，以跟外界打交道，比如，浏览器环境、Node.js环境。不同的runtime，会提供不同的接口，比如，在 Node.js 环境中，我们可以通过require来引入模块；而在浏览器中，我们有window、 DOM。

Js引擎是单线程的，如上图中，它负责维护任务栈，并通过 Event Loop 的机制，按顺序把任务放入栈中执行。而图中的异步处理模块，就是 runtime 提供的，拥有和Js引擎互不干扰的线程。接下来，我们会细说图中的：栈和任务队列。

栈

让我们来看一看以下这段代码：

1

它在栈中的入栈、出栈过程，如下图：

入栈、出栈过程

任务队列

Js 中，有两类任务队列：宏任务队列（macro tasks）和微任务队列（micro tasks）。宏任务队列可以有多个，微任务队列只有一个。那么什么任务，会分到哪个队列呢？

    宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.

    微任务：process.nextTick, Promise, Object.observer, MutationObserver.

我们上面讲到，当stack空的时候，就会从任务队列中，取任务来执行。共分3步：

    1、取一个宏任务来执行。执行完毕后，下一步。

    2、取一个微任务来执行，执行完毕后，再取一个微任务来执行。直到微任务队列为空，执行下一步。

    3、更新UI渲染。

Event Loop 会无限循环执行上面3步，这就是Event Loop的主要控制逻辑。其中，第3步（更新UI渲染）会根据浏览器的逻辑，决定要不要马上执行更新。毕竟更新UI成本大，所以，一般都会比较长的时间间隔，执行一次更新。

从执行步骤来看，我们发现微任务，受到了特殊待遇！我们代码开始执行都是从script（全局任务）开始，所以，一旦我们的全局任务（属于宏任务）执行完，就马上执行完整个微任务队列。看个例子：

2

谈谈setTimeout

这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数：

3

但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行。

最后，送上Links:

JavaScript 异步、栈、事件循环、任务队列

并发模型与事件循环

Philip Roberts: Help, I’m stuck in an event-loop.

Promise的队列与setTimeout的队列有何关联？

JavaScript：彻底理解同步、异步和事件循环(Event Loop)

从event loop规范探究javaScript异步及浏览器更新渲染时机

JavaScript 运行机制详解：再谈Event Loop - 阮一峰的网络日志

Tasks, microtasks, queues and schedules

WindowOrWorkerGlobalScope.setTimeout()

What is the difference between JavaScript Engine and JavaScript Runtime Environment