Commit db8a054

异步执行就是非阻塞模式执行，每一个任务有一个或多个回调函数`callback`，前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。浏览器对于每个`Tab`只分配了一个`Js`线程，主要任务是与用户交互以及操作`DOM`等，而这也就决定它只能为单线程，否则会带来很复杂的同步问题，例如假定`JavaScript`同时有两个线程，一个线程在某个`DOM`节点上添加内容，另一个线程删除了这个节点，这时浏览器无法确定以哪个线程的操作为准。

首先来看一个例子，与上文一样来测试一个异步执行的操作

本地测试，设置的`setTimeout`回调函数大约在`30s`之后才执行，远远大于`4ms`，我在主线程设置了一个非常大的循环来阻塞`Js`主线程，注意我并没有设置一个死循环，假如我在此处设置死循环来阻塞主线程，那么设置的`setTimeout`回调函数将永远不会执行，此外由于渲染线程与`JS`引擎线程是互斥的,`Js`线程在处理任务时渲染线程会被挂起，整个页面都将被阻塞，无法刷新甚至无法关闭，只能通过使用任务管理器结束`Tab`进程的方式关闭页面。

例如上例中的`setTimeout`完成后的事件回调就存在任务队列中，这里需要说明的是浏览器定时计数器并不是由`JavaScript`引擎计数的，因为`JavaScript`引擎是单线程的，如果线程处于阻塞状态就会影响记计时的准确，计数是由浏览器线程进行计数的，当计数完毕，就将事件回调加入任务队列，同样`HTTP`请求在浏览器中也存在单独的线程，也是执行完毕后将事件回调置入任务队列。通过这个流程，就能够解释为什么上例中`setTimeout`的回调一直无法执行，是由于主线程也就是执行栈中的代码没有完成，不会去读取任务队列中的事件回调来执行，即使这个事件回调早已在任务队列中。

主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为`Event Loop`，`Event Loop`是一个执行模型，在不同的地方有不同的实现，浏览器和`NodeJS`基于不同的技术实现了各自的`Event Loop`。浏览器的`Event Loop`是在`HTML5`的规范中明确定义，`NodeJS`的`Event Loop`是基于`libuv`实现的。

* 宏队列，一些异步任务的回调会依次进入宏队列，等待后续被调用，包括`setTimeout`、`setInterval`、`setImmediate(Node)`、`requestAnimationFrame`、`UI rendering`、`I/O`等操作

* 微队列，另一些异步任务的回调会依次进入微队列，等待后续调用，包括`Promise`、`process.nextTick(Node)`、`Object.observe`、`MutationObserver`等操作

当`Js`执行时，进行如下流程

1. 首先将执行栈中代码同步执行，将这些代码中异步任务加入后台线程中

2. 执行栈中的同步代码执行完毕后，执行栈清空，并开始扫描微队列

3. 取出微队列队首任务，放入执行栈中执行，此时微队列是进行了出队操作

4. 当执行栈执行完成后，继续出队微队列任务并执行，直到微队列任务全部执行完毕

5. 最后一个微队列任务出队并进入执行栈后微队列中任务为空，当执行栈任务完成后，开始扫面微队列为空，继续扫描宏队列任务，宏队列出队，放入执行栈中执行，执行完毕后继续扫描微队列为空则扫描宏队列，出队执行

`JavaScript`是单线程的，为了避免同步阻塞可能会带来的一些负面影响，引入了异步非阻塞机制，而对于异步执行的解决方案从最早的回调函数，到`ES6`的`Promise`对象以及`Generator`函数，每次都有所改进，但是却又美中不足，他们都有额外的复杂性，都需要理解抽象的底层运行机制，直到在`ES7`中引入了`async/await`，他可以简化使用多个`Promise`时的同步行为，在编程的时候甚至都不需要关心这个操作是否为异步操作。

`async/await`实际上是`Generator`函数的语法糖，如`Promises`类似于结构化回调，`async/await`在实现上结合了`Generator`函数与`Promise`函数，下面使用`Generator`函数加`Thunk`函数的形式实现一个与上边相同的例子，可以看到只是将`async`替换成了`*`放置在函数右端，并将`await`替换成了`yield`，所以说`async/await`实际上是`Generator`函数的语法糖，此处唯一不同的地方在于实现了一个流程的自动管理函数`run`，而`async/await`内置了执行器，关于这个例子的实现下边会详述。对比来看，`async`和`await`，比起`*`和`yield`，语义更清楚，`async`表示函数里有异步操作，`await`表示紧跟在后面的表达式需要等待结果。

自动流程管理`run`函数，首先需要知道在调用`next()`方法时，如果传入了参数，那么这个参数会传给上一条执行的`yield`语句左边的变量，在这个函数中，第一次执行`next`时并未传递参数，而且在第一个`yield`上边也并不存在接收变量的语句，无需传递参数，接下来就是判断是否执行完这个生成器函数，在这里并没有执行完，那么将自定义的`next`函数传入`res.value`中，这里需要注意`res.value`是一个函数，可以在下边的例子中将注释的那一行执行，然后就可以看到这个值是`f(funct){...}`，此时我们将自定义的`next`函数传递后，就将`next`的执行权限交予了`f`这个函数，在这个函数执行完异步任务后，会执行回调函数，在这个回调函数中会触发生成器的下一个`next`方法，并且这个`next`方法是传递了参数的，上文提到传入参数后会将其传递给上一条执行的`yield`语句左边的变量，那么在这一次执行中会将这个参数值传递给`r1`，然后在继续执行`next`，不断往复，直到生成器函数结束运行，这样就实现了流程的自动管理。