深入決議JS的宏任務和微任務

宏任務和微任務可以說是在筆試面試中經常出現的，那么我們改如何真正理解和掌握這個知識點呢？我們首先得先了解JS的執行機制，

1、關于javascript

javascript是一門單執行緒語言，換而言之，在一段時間內，js只會做一件事，只有等這件事做完了，才會去做另外的事，有的朋友就會想：js真的這么“固執”嗎？任務分大小，分輕重緩急，如何能提高整體的效率是我們要思考的問題，js是如何從“鋼鐵直男”變成善解人意、小鳥依人的呢？

2、js的事件回圈

比如我們做飯，完成做飯這個流程分為：燒水煮飯->洗菜切菜->炒菜等，難道我們要等燒水煮飯完成后再去做后面的事情嗎？要知道“干飯不積極，思想有問題”，任何事情都是難不倒我們聰明的程式猿的，
我們把任務分為同步任務跟異步任務：

(1)同步：前一個任務結束后再執行后一個任務，程式的執行順序與任務的排列順序是一致的、同步的，比如做飯的同步做法：我們要燒水煮飯，等水開了(10分鐘之后)，再去切菜，炒菜，
(2)異步：在做一件事情時，因為這件事會花費很長時間，在做這件事的同時，你還可以去處理其他事情，比如做飯的異步做法：在燒水的同時，利用這10分鐘，去切菜，炒菜，
本質區別：這條流水線上各個流程的執行順序不同
同步任務：同步任務都在主執行緒上執行，形成一個執行堆疊
異步任務：JS的異步是通過回呼函式實作的，一般而言，異步任務有以下三種型別：
(1)普通事件，如 click、resize等
(2)資源加載，如 load、error等
(3)定時器，包括 setInterval、setTimeout等

為了用最小的學習成本徹底弄懂執行機制，所以我們用導圖來說明：

看完這張圖后，小朋友，你是否有很多的疑惑？

同步和異步任務分別進入不同的執行"場所"，同步的進入主執行緒，異步的進入Event Table并注冊函式，
當指定的事情完成時，Event Table會將這個函式移入Event Queue，
主執行緒內的任務執行完畢為空，會去Event Queue讀取對應的函式，進入主執行緒執行，
上述程序會不斷重復，也就是常說的Event Loop(事件回圈)，

話不多說，我們來直接上代碼：

console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);
 
Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});
 
console.log('script end');

結果的輸出順序： start promise end then1 then2 setTimeout

看到這段代碼，我相信很多朋友會拿起鍵盤，噠噠噠敲下，
讓我們來更加詳細地了解下，JS執行機制：
(1)先執行執行堆疊中的同步任務
(2)當有異步任務(回呼函式)時，提交給對應的異步行程處理，比如onclick,當你點擊了，才會放入任務佇列中
(3)一旦執行堆疊中的同步任務執行完畢，系統就會按次序讀取任務佇列中的異步任務，于是被讀取的異步任務結束等待狀態，進入執行堆疊，開始執行，

>         console.log(1);
>         setTimeout(function(){
>             console.log(3);
>         },0);
>         console.log(2);
>         // 結果為 1 2 3

console.log(1);
document.onclick = function(){
     console.log('click');
 }
 console.log(2);
 // 3秒之后才會提交到任務佇列中
 setTimeout(function(){
     console.log(3);
 },3000);
 
 不點擊輸出的結果是 1，2，3
 3秒之前點擊的結果是 1，2，click,3
 3秒之后點擊的結果是 1，2，3，click

看到這里，js的執行機制你懂了嗎？
像極了此時自信滿滿的你
我們進入正題，除了廣義的同步任務和異步任務，我們對任務有更精細的定義：

1、macro-task(宏任務)：進入任務堆疊等待主執行緒執行的主代碼塊，包括從異步佇列里加入到堆疊的，如setTimeout，setInterval
2、micro-task(微任務)：是異步佇列中，在當前這一次宏任務執行完后，頁面渲染之前要執行的任務，如Promise，process.nextTick，Object.observe

沒有對比就沒有傷害

讓我們來看看宏任務和微任務的執行程序：

1.主體代碼（第一次事件回圈開始，所有的script代碼）作為宏任務進入任務執行堆疊，但在主執行緒執行之前要做一系列操作判斷，
2.判斷當前任務是同步還是異步，同步的由主執行緒在任務堆疊中按先進后出順序（先區域背景關系，再全域背景關系）執行，異步判斷是宏任務還是微任務，
3.異步中的宏任務放入異步的宏任務event Table（異步佇列分兩種，宏任務佇列和微任務佇列,event Table也一樣），微任務進入微任務event Table，在回呼函式注冊之后，再次進入它們對應的佇列，
4.當主執行緒的任務執行完后，會檢查微任務佇列是否有任務，如果有就執行，如此回圈，直到微任務佇列沒有任務，
5.當前事件的微任務執行完后，開始執行下一次事件，即會執行宏任務佇列中的宏任務，如此回圈下去，直到沒有任務，

下面用代碼來深入理解上面的機制：

console.log('---start---');//第一輪主執行緒
setTimeout(() => {
  console.log('setTimeout');  // 將回呼代碼放入個宏任務佇列，第二輪宏任務執行
}, 0);
 
new Promise((resolve, reject) => {
  console.log('---Promise第一輪微任務同步執行---');//第一輪微任務同步執行
  resolve()
}).then(()=>{
  console.log('Promise.then實體成功回呼執行'); // 將回呼代碼放入微任務佇列，第一輪宏任務執行完后立即執行
});
 
console.log('---end---');//第一輪主執行緒結束

1、這段代碼作為宏任務，進入主執行緒，
2、先遇到同步代碼console.log(),立即執行
3、接下來遇到setTimeout ,將回呼代碼放入個宏任務佇列
4、遇到Promise,它在創建的時候就會立即執行，then函式分發到微任務佇列
5、遇到最后一個console.log(), 立即執行
5、主執行緒上所有代碼執行完畢， 查看當前有沒有可執行的微任務，執行then的回呼，
6、微任務佇列空了，執行下一個宏任務

其實不管代碼怎么嵌套，怎么復雜，只要我們弄清除了原理，什么都不怕，讓我們再來個復雜一點的練練手吧

 1 new Promise(function (resolve) { 
 2     console.log('1')// 宏任務一
 3     resolve()
 4 }).then(function () {
 5     console.log('3') // 宏任務一的微任務
 6 })
 7 setTimeout(function () { // 宏任務二
 8     console.log('4')
 9     setTimeout(function () { // 宏任務五
10         console.log('7')
11         new Promise(function (resolve) {
12             console.log('8')
13             resolve()
14         }).then(function () {
15             console.log('10')
16             setTimeout(function () {  // 宏任務七
17                 console.log('12')
18             })
19         })
20         console.log('9')
21     })
22 })
23 setTimeout(function () { // 宏任務三
24     console.log('5')
25 })
26 setTimeout(function () {  // 宏任務四
27     console.log('6')
28     setTimeout(function () { // 宏任務六
29         console.log('11')
30     })
31 })
32 console.log('2') // 宏任務一

結果：1-2-3-4-5-6-7-8-9-10-11-12

初步總結：先執行主執行緒上的同步代碼，再執行微任務佇列，后執行宏任務佇列，

注意事項：

(1)promise是立即執行的，它創建的時候就會執行，不存在將promise推入微任務中的說法；
(2)resolve()是用來表示promise的狀態為fullfilled，相當于只是定義了一個有狀態的Promise，但是并沒有呼叫它；
(3)promise呼叫then的前提是promise的狀態為fullfilled；
(4)只有promise呼叫then的時候，then里面的函式才會被推入微任務中；

3、async和await

拋出3個疑問： 1、async是干啥的？ 2、await在等啥？ 3、await等到了又要干啥？

async/await是對Promise的優化，await后面需要是一個Promise物件，如果不是則會被轉成Promise物件

執行順序：
（1）await 運算式會暫停當前 async function 的執行，等待 Promise 處理完成；
（2）若 Promise 正常處理(Resolved，又稱Fulfilled)，其回呼resolve函式的引數作為 await 運算式的值，繼續執行 async function；
（3）若 Promise 處理例外(Rejected)，await 運算式會把 Promise 的例外原因拋出；
可能還是會有點懵，話不多說，我們直接上代碼

console.log('script start');
async function async1() { //語法糖 async2()執行完畢 才執行下面 會加入在微任務里面
      await async2();
      console.log('async1 end');
  };
  async function async2() {
      console.log('async2 end')
  }
  async1()
  setTimeout(function () {
      console.log("setTimeout100")
  }, 100)
  setTimeout(function () {
      console.log("setTimeout")
  }, 0)
  new Promise(resolve => {
      console.log('promise')
      resolve()
  }).then(function () {
      console.log("promise1")
  })
      .then(function () {
          console.log("promise2")
      })

上面代碼中async1遇到await async2()會等async2()執行完畢再把下面的加入到微任務佇列里面，所以先輸出的是async2 end,由于下面的promise是立即執行的，所以先輸出promise再輸出async1 end
Promise和async中的立即執行

我們知道Promise中的異步體現在then和catch中，所以寫在Promise中的代碼是被當做同步任務立即執行的，而在async/await中，在出現await出現之前，其中的代碼也是立即執行的，那么出現了await時候發生了什么呢？
await做了什么，從字面意思上看await就是等待，await等待的是一個運算式，這個運算式的回傳值可以是一個promise物件也可以是其他值，很多人以為await會一直等待之后的運算式執行完之后才會繼續執行后面的代碼，實際上await是一個讓出執行緒的標志，await后面的運算式會先執行一遍，將await后面的代碼加入到microtask中，然后就會跳出整個async函式來執行后面的代碼，由于因為async await 本身就是promise+generator的語法糖，所以await后面的代碼是microtask，如果里面沒有await，執行起來等同于普通函式；如果沒有await，async函式并沒有很厲害是不是

有人可能會想async沒有await的情況下與其它的同步代碼誰先執行的問題，讓我們直接上代碼

console.log('script start');
async function async2() {
    console.log('async2 end')
}
async2()
console.log('abc');

console.log('script start');
async function async1() {
    await async2();
    console.log('async1 end');
};
async function async2() {
    console.log('async2 end')
}
console.log('abc');
async1()

有的小伙伴看到上面可能有點懵了，不是說async也是立即執行的嗎，async2 不是先出現了，應該先輸出async2 end再輸出abc嗎？要看清楚哦，上面只有先呼叫了async1（）才會呼叫async2，而console.log(‘abc’)在async2呼叫之前執行呢？所以還是要看清楚的，來給你驗證下：

console.log('script start');
async function async1() {
    await async2();
    console.log('async1 end');
};
async function async2() {
    console.log('async2 end')
}
async1();
console.log('abc');

解決開頭的3個疑問：

1、async是干啥的？
定義異步函式（內部通常有異步操作），回傳Promise物件（函式回傳Promise→顯式回傳return的Promise；函式回傳非Promise→隱式回傳Promise.resolve()包裝的return值；）
2、await在等啥？ 只能放在async函式中，等待右側運算式結果（函式→結果=return值；字串→結果=字串；）
3、await等到了又要干啥？
阻塞后面的代碼，先執行async外部的同步代碼，同步代碼執行完再回到async內部，拿到運算結果（運算式回傳Promise→等待Promise物件fulfilled，再將resolve引數作為運算式的運算結果；運算式回傳非Promise→直接作為運算式的運算結果；）