异步与event-loop

异步是什么？

维基百科：
异步方法调用或异步方法模式是(多线程)面向对象程序设计中用于异步调用对象的潜在的长期运行方法的一种设计模式

是不是很深奥，感觉完全看不懂？
讲一下我理解的异步：异步是一种程序执行机制，用于将某个方法暂时挂起，在某个事件被触发之后再执行该方法。
依然感觉迷糊，不知道在讲什么？看下去就会明白了。

异步存在的意义

众所周知，JavaScript 是一门单线程语言，什么是单线程呢？单线程指同一时间，只能同时执行一个任务，在上一个任务结束之后才能进行下一个任务的执行。这意味着，JavaScript的执行是同步的，顺序性地执行，就像一条直线，从头跑到尾。那么，如果某一个任务需要很长的执行时间，这个任务下面的所有任务都需要等待这个任务完成才能执行，就会造成运算能力和时间的浪费。这时候，异步的作用就体现出来了。

在很多情况下，JavaScript程序中的很多方法（可以看成上面说的任务）的执行是不依赖于上一个方法的执行结果的，就是说，很多情况下，后面运行的代码不会因为前面的代码没运行而出错，那么，此时，就可以将执行时间长的方法放到JavaScript程序的最后面执行，就不会浪费阻塞代码的运行了。可是，将执行时间长的方法放到后面执行，那依赖于它的结果的方法怎么办？放到更后面执行不就行了吗？在方法执行完之后再执行依赖它的方法。在这里，我们将执行时间长的方法暂时挂起，等到其他程序执行完毕（此时触发事件），再执行该方法，这就是一个异步。

如果你还不明白，那么再来看一个例子。AJAX请求：
JavaScript 可以通过 ajax 去请求数据，而 ajax 是需要发送 HTTP 请求、获取 HTTP 响应的，这些都需要时间，特别是在网络不好的情况下，需要的时间就更长了。而 JavaScript 是单线程的，在请求的这段时间里，JavaScript 就什么都不干，光等着了吗？显然是不可能这样的。JavaScript 利用异步机制，将需要获取 ajax 执行结果的方法暂时挂起，等到 ajax 请求、响应完毕，获得结果之后，再执行挂起的方法。而将方法挂起之后，JavaScript 不就可以去执行其他不需要等 ajax 完成的方法了吗？

最后来一个通俗的生活化的例子：
你妈妈要蒸鱼，已经把鱼放进锅了，突然发现没有酱油。于是，你妈妈叫你去楼下便利店买酱油，你屁颠屁颠地下楼了。然后呢？此时，你妈妈要怎么办？是站着等你把酱油买回来继续蒸鱼，还是先去炒个青菜，等你买了酱油回来再蒸鱼？正常智商的都会选后者吧。这就是一个异步的例子。蒸鱼 => 没有酱油，得到酱油需要时间 => 挂起蒸鱼任务，干点别的事情 => 得到酱油 => 继续蒸鱼。这不就是挂起任务，触发事件，重新执行嘛？

异步的原理

此时，很容易就能想明白异步的必要条件：被挂起的方法、触发重新执行的事件。
而在 JavaScript 中，异步就可以看成是 回调函数和事件的组合。在某个方法中，定义一个回调函数和触发事件，当触发事件的时候，就执行回调函数
ajax 的例子：

// 定义一个 XMLHttpRequest 对象用来发送 ajax
let request = new XMLHttpRequest()
//  开启 XMLHttpRequest 通道
request.open('get', 'path', true)  // true 代表异步执行
//  发送请求
request.send()
//  监听事件触发回调
request.onreadystatechange = callbackFn

异步的 ajax 就是一个很明显的异步执行过程，在这个过程中，会将 callbackFn 挂起，监听 readystatechange 事件，触发 readystatechange 事件时，再触发 callbackFn。

顺便说一下常见的异步操作吧。

常见异步操作

• 网络请求，如 ajax、http等
• i/o 操作，读取文件等。
• 定时器，setTimeout、setInterval等
• 事件监听，click、keydowm等

event-loop

上面说完了异步，我们再来说一下 event-loop。
我们知道，JavaScript引擎是单线程的，但是浏览器可不是单线程的。

浏览器至少有3个常驻线程：

JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。

GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时，该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。

事件触发线程，当一个事件被触发时，该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系，所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。

由此，我们知道了，浏览器中有 JavaScript线程、任务队列、GUI渲染线程、事件触发线程。
GUI渲染线程先不管。看一下 JavaScript线程、任务队列、事件触发线程。
是不是除了 任务队列，剩下两个都似曾相识啊？

接下来，先上一张著名的图（转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》）。

event-loop

JS 是JavaScript 线程。
callback-queue 是任务队列。
现在是不是一目了然了？

JavaScript 引擎线程中，有 堆(heap)和栈(stack)，栈中存放的就是当前 JavaScript 程序运行的所有同步任务，也就是说，这是一个 运行栈。
在 JavaScript 引擎线程的机制中，只会一直运行 栈(stack) 中的任务，当栈(stack) 中的任务全部运行完成后，JavaScript 引擎线程就会读取 callback-queue(消息队列、任务队列) 中的任务，然后将callback-queue(消息队列、任务队列) 的任务放到 栈(stack)执行，一直这样循环，直到 栈(stack) 和 callback-queue(消息队列、任务队列)中都没有任务为止。这称之为 event-loop，也就是中文翻译的 “事件轮询”。

那么，问题来了，callback-queue 中的任务是哪里来的呢？聪明的你，也许已经猜到了。没错，就是异步任务。

异步任务与event-loop

前面说，浏览器事件触发线程会将被触发的事件添加到待处理队列的队尾。也就是说，在异步任务中，当异步设置的事件被触发时，浏览器事件触发线程就会将异步的 callbackFn 放到 callback-queue 的队尾，当下一次进行 事件轮询 时，异步任务的 callbaFn 就会被执行。

那么，异步与event-loop的关系大概就是这样了：

异步与event-loop
自己画的图，拍照也不好，污染大家眼睛，不好意思。。将就看吧。
基本上就是这样了。这些是我参考其他资料后的理解，如果有不对的地方，欢迎指正。
参考：
阮一峰-JavaScript 运行机制详解：再谈Event Loop
浏览器内核处理流程