摘要：消息隊(duì)列和事件循環(huán)異步過程中，工作線程在異步操作完成后需要通知主線程，那么這個通知機(jī)制是怎樣實(shí)現(xiàn)的呢答案是利用消息隊(duì)列和事件循環(huán)。

我們通常說 JavaScript 是單線程的，實(shí)際上是指在 JS 引擎中負(fù)責(zé)解釋和執(zhí)行 JS 代碼的線程只有一個，一般成為主線程，在這種前提下，為了讓用戶的操作不存在阻塞感，前端 APP 的運(yùn)行需要依賴于大量的異步過程，所以當(dāng)然瀏覽器中還存在一些其他的線程，比如處理 http 請求的線程、處理 DOM 事件的線程、定時器線程、處理文件讀寫的 I/O 線程等等。

一個異步過程通常是這樣的：

主線程發(fā)起一個異步請求，相應(yīng)的工作線程接收請求并告知主線程已收到；

主線程可以繼續(xù)執(zhí)行后面的代碼，同時工作線程執(zhí)行異步任務(wù)；

工作線程完成工作后通知主線程，主線程收到通知后調(diào)用回調(diào)函數(shù)。

異步過程中，工作線程在異步操作完成后需要通知主線程，那么這個通知機(jī)制是怎樣實(shí)現(xiàn)的呢？答案是利用消息隊(duì)列和事件循環(huán)。消息隊(duì)列是一個先進(jìn)先出的隊(duì)列，里面存放著各種消息，我們可以簡單的理解為消息就是注冊異步任務(wù)時添加的回調(diào)函數(shù)；事件循環(huán)是指主線程重復(fù)從消息隊(duì)列中獲取消息、執(zhí)行回調(diào)的過程，之所以稱為事件循環(huán)，就是因?yàn)樗?jīng)常被用類似如下方式來實(shí)現(xiàn)：

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

消息隊(duì)列是一個存儲著待執(zhí)行任務(wù)的隊(duì)列，其中的任務(wù)嚴(yán)格按照時間先后順序執(zhí)行，排在隊(duì)頭的任務(wù)將會率先執(zhí)行，而排在隊(duì)尾的任務(wù)會最后執(zhí)行。消息隊(duì)列每次僅執(zhí)行一個任務(wù)，在該任務(wù)執(zhí)行完畢之后，再執(zhí)行下一個任務(wù)。執(zhí)行棧則是一個類似于函數(shù)調(diào)用棧的運(yùn)行容器，當(dāng)執(zhí)行棧為空時 JS 引擎便檢查消息隊(duì)列，如果不為空消息隊(duì)列便將第一個任務(wù)壓入執(zhí)行棧中運(yùn)行。

下面我們來看下述代碼來驗(yàn)證我們的想法：

setTimeout(function() {
    console.log(4)
}, 0);

new Promise(function(resolve) {
    console.log(1)

    for (var i = 0; i < 10000; i++) {
        i == 9999 && resolve()
    }

    console.log(2)
}).then(function() {
    console.log(5)
});

console.log(3);

按道理來說，執(zhí)行 setTimeout 時因?yàn)檠舆t為0，所以 console.log(4) 直接插入至消息隊(duì)列；創(chuàng)建 Promise 實(shí)例時同步執(zhí)行其函數(shù)體內(nèi)的代碼，先打印 1，再循環(huán)10000次后執(zhí)行 resolve 將 then 中的回調(diào)函數(shù) console.log(5) 插入至消息隊(duì)列，然后打印 2；最后執(zhí)行 console.log(3) 打印 3；在主線程執(zhí)行完成后讀取消息隊(duì)列，依次打印4和5。

上面的想法當(dāng)然是比較天真的，實(shí)際上瀏覽器中僅有一個事件循環(huán)，然后消息隊(duì)列是可以有多個的。

macro-queue: script (整體代碼), setTimeout, setInterval, setImmediate, I/O, UI Rendering
micro-queue: process.nextTick, Promise, Object.observe, MutationObserver

并且 micro-queue 的任務(wù)優(yōu)先級高于 macro-queue 的任務(wù)優(yōu)先級，這兩個任務(wù)隊(duì)列執(zhí)行順序如下：取1個 macro-task 執(zhí)行之，然后把所有 micro-task 順序執(zhí)行完，再取 macro-task 中的下一個任務(wù)，以此類推依次進(jìn)行。

優(yōu)先級：process.nextTick > promise.then > setTimeout > setImmediate

Tip：process.nextTick 永遠(yuǎn)大于 promise.then 原因其實(shí)很簡單：在 NodeJS 中，_tickCallback 在每一次執(zhí)行完 TaskQueue 中的一個任務(wù)后被調(diào)用，而在這個_tickCallback 中實(shí)質(zhì)上干了兩件事：

執(zhí)行掉 nextTickQueue 中所有任務(wù)

第一步執(zhí)行完后，執(zhí)行 _runMicrotasks 函數(shù)（執(zhí)行 micro-task 中的部分，即 promise.then 注冊的回調(diào)）

總結(jié)：瀏覽器環(huán)境一般只能有一個事件循環(huán)（實(shí)際上有兩類：browsing contexts 和 web workers），而一個事件循環(huán)可以多個任務(wù)隊(duì)列，每個任務(wù)都有一個任務(wù)源。相同任務(wù)源的任務(wù)，只能放到一個任務(wù)隊(duì)列中；不同任務(wù)源的任務(wù)，可以放到不同任務(wù)隊(duì)列中。舉個栗子，客戶端可能實(shí)現(xiàn)一個包含鼠標(biāo)鍵盤事件的任務(wù)隊(duì)列，還有其他的任務(wù)隊(duì)列，而給鼠標(biāo)鍵盤事件的任務(wù)隊(duì)列更高優(yōu)先級，例如75%的可能性執(zhí)行它，這樣就能保證流暢的交互性，而且別的任務(wù)也能執(zhí)行到。

至此，再返回去看之前的代碼就不難分析出：代碼執(zhí)行開始把 setTimeout 的回調(diào)插入至 macro-queue 中，而打印完1后把 promise.then 的回調(diào)函數(shù)插入至 micro-queue 中，整體代碼執(zhí)行完后，按照消息隊(duì)列的優(yōu)先級，先執(zhí)行 micro-task 即打印5，最后執(zhí)行 macro-task 即打印4。