引言

首先需要知道的是JavaScript是门 $\color{red}{单线程，非阻塞}$ 的语言。之所以如此设计，是因为JavaScript主要应用于浏览器的互动，即操作DOM。所以一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。我们假设JavaScript是多线程的，那么多个线程同时进行，两个线程同时操作一个DOM，那么以谁的操作为准呢？
$\color{red}{非阻塞}$ 是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。
单线程虽然实现起来比较简单，执行环境相对单纯；但是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。因此为了解决这个问题Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

同步模式

就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步模式

每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行队列上的后一个任务，而是执行回调函数；后一个任务则是不等前一个任务的回调函数的执行而执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

JavaScript为何能执行异步任务

Javascript是单线程的，但是却能执行异步任务，这主要是因为 JS 中存在 $\color{red}{事件循环}$ （Event Loop）和 $\color{red}{任务队列}$ （Task Queue）。
示例

setTimeout(function(){
    console.log(2);
},0);
 
new Promise(function(resolve){
    console.log(3);
    resolve();
    console.log(4);
}).then(function(){
    console.log(5);
});
 
console.log(6);
 
setTimeout(function(){
    console.log(7);
},0);

异步代码测试结果.png

事件循环（Event Loop）

JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为Tick。每次Tick的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次Tick会查看任务队列中是否有需要执行的任务。

示例

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

事件循环会按照上图所示的模式进行操作，queue.waitForMessage() 会同步地等待消息到达(如果当前没有任何消息等待被处理)。

任务队列

和事件循环联系在一起的是任务队列，
-所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
-主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
-一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
-主线程不断重复上面的第三步。

异步任务

异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同，如onclick, setTimeout,ajax 处理的方式都不同，这些异步操作是由浏览器内核的webcore来执行的，webcore包含下图中的3种 webAPI，分别是DOM Binding、network、timer模块。
-DOM Binding 模块处理一些DOM绑定事件，如onclick事件触发时，回调函数会立即被-webcore添加到任务队列中。
-network 模块处理Ajax请求，在网络请求返回时，才会将对应的回调函数添加到任务队列中。
-timer 模块会对setTimeout等计时器进行延时处理，当时间到达的时候，才会将回调函数添加到任务队列中。

webApi.png

事件循环和任务队列之间的关系

事件循环规范.png

规范中中提到，一个浏览器环境，只能有一个事件循环，而一个事件循环可以多个任务队列，每个任务都有一个任务源（Task source）。相同任务源的任务，只能放到一个任务队列中。
不同任务源的任务，可以放到不同任务队列中。
简单来说：一个事件循环可以有多个任务队列，队列之间可有不同的优先级，同一队列中的任务按先进先出的顺序执行，但是不保证多个任务队列中的任务优先级，具体实现可能会交叉执行。

不同任务队列的优先级

在异步代码测试结果的图中看到，代码的执行顺序并不是按着，代码书写顺序依次执行的，这是因为不同的异步任务之间也有优先级的区别。异步任务分为两类，macrotask（宏任务）和 microtask（微任务）

宏任务（macro task）

script(你的全部JS代码，“同步代码”）, setTimeout, setInterval, setImmediate, I/O,UI rendering

微任务（micro task）

process.nextTick,Promises（这里指浏览器原生实现的 Promise）, Object.observe, MutationObserver

执行顺序

浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染（task->渲染->task->...），鼠标点击会触发一个事件回调，需要执行一个宏任务，然后解析HTMl。微任务通常来说就是需要在当前 task 执行结束后立即执行的任务，比如对一系列动作做出反馈，或或者是需要异步的执行任务而又不需要分配一个新的 task，这样便可以减小一点性能的开销。所有微任务总会在下一个宏任务之前全部执行完毕。
所以，浏览器环境中，js执行任务的流程是这样的：
1.第一个事件循环，先执行script中的所有同步代码（即 macrotask 中的第一项任务）
2.再取出 microtask 中的全部任务执行（先清空process.nextTick队列，再清空promise.then队列）
3.下一个事件循环，再回到 macrotask 取其中的下一项任务
4.再重复2
5.反复执行事件循环…

一些常见的异步任务

setTimeout()

将事件插入到了事件队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。
当主线程时间执行过长，无法保证回调会在事件指定的时间执行。
浏览器端每次setTimeout会有4ms的延迟，当连续执行多个setTimeout，有可能会阻塞进程，造成性能问题。

setImmediate()

事件插入到事件队列尾部，主线程和事件队列的函数执行完成之后立即执行。和setTimeout(fn,0)的效果差不多。
服务端node提供的方法。浏览器端最新的api也有类似实现:window.setImmediate,但支持的浏览器很少。

process.nextTick()

插入到事件队列尾部，但在下次事件队列之前会执行。也就是说，它指定的任务总是发生在所有异步任务之前，当前主线程的末尾。
大致流程：当前”执行栈”的尾部–>下一次Event Loop（主线程读取”任务队列”）之前–>触发process指定的回调函数。
服务器端node提供的办法。用此方法可以用于处于异步延迟的问题。
可以理解为：此次不行，预约下次优先执行。

Promise

Promise本身是同步的立即执行函数，当在 executor 中执行 resolve 或者 reject 的时候, 此时是异步操作，会先执行 then/catch 等，当主栈完成后，才会去调用 resolve/reject 中存放的方法执行，打印 p 的时候，是打印的返回结果，一个 Promise 实例。

async await

Async/Await就是一个自执行的generate函数。利用generate函数的特性把异步的代码写成“同步”的形式。
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再执行函数体内后面的语句。可以理解为，是让出了线程，跳出了 async 函数体。

参考资料

https://blog.csdn.net/happyqyt/article/details/90644667
https://blog.csdn.net/github_35549695/article/details/82390345
https://www.cnblogs.com/nayek/p/11729923.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop#%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF

JavaScript事件循环和任务队列