Event loop 與 Async Await 比較

Node.js Event loop 與 Async Await 比較

JS 原理

JS 為何是單線程的

最初設計JS時，主要是用來驗證瀏覽器DOM元素的一個語言，如果js是多線程，那麼兩個線程同時對一個DOM元素會進行相互衝突的操作這樣瀏覽器是無法執行的

JS 為何需要非同步

如果JS沒有非同步，那麼程式由上而下執行，如果遇到上一行解析時間很長，那麼下面的代碼就會被阻塞。對用戶而言阻塞=卡死。就會有很糟的體驗

JS 單線程是如何實現非同步的呢

JS 的非同步以及多線程都可以理解為一個假象。因為其實就是透過事件循環（Event Loop），去調配單一線程的執行順序。所以理解Event Loop 就可以理解JS非同步的運行機制。

Event Loop

為何要弄懂 Event Loop

掌握底層原理，可以讓自己以不變應萬變
增加深度，了解JS運行機制

Stack、Queue、Heap

堆 Heap

堆為一種數據結構，利用而二元樹所獲得的一種數據結構。一種為最小堆，另一種為最大堆

堆疊 Stack

Call Stack

一種資料結構
後進先出的概念
只能在最尾端插入後刪除的線性表

Callback Queue or Event Queue

一種資料結構
先進先出的概念
在結構的前端進行刪除，在結構的後端進行插入
沒有元素時稱為空陣列

任務種類

一種是宏任務（MacroTask）
一種是微任務（MicroTask）不管宏任務or微任務都是進入 Event Queue

宏任務（MacroTask）

script 全部代碼
I/O
UI Rendeting
MessageChannel
postMessage

微任務（MicroTask）

Process.nextTick（Node.js）
Promise
Object.observe（廢棄）
MutationObserver

queues 非同步事件

setTimeout、setInterval、setImmediate
click
ajax

調用線怎麼走的

JS調用執行線為 後進先出（Stack） 的規則，當函數執行時，會被添加到線的頂部，當調用執行線執行完成後，就會從頂部移出，直到線內被清空

Event Loop 進程

「調用執行線」執行完同步任務後，會去看調用執行線是否為空
如果調用執行線為空，會去檢查微任務是否為空

為空：執行宏任務
不為空：執行微任務

每次單個宏任務執行完畢後，檢查微任務（Callback Queue）隊列是否為空，不為空則依「先入先出」規則做
設置微任務隊（Callback Queue）為 null，然後執行宏任務，如此循環

microTask 進程

設置 microTask 檢查點標誌為true
當事件循環 microtask 執行不為空時：選擇一個最先進入 microtask 陣列的 microtask。將事件循環 microtask 設置為以選擇的 microtask，運行此 microtask，將已經執行完的 microtask 為null，移除此 microtask
清除 indexDB 事務
設置進入 microtask 檢查點的標誌為 false

分析 Event Loop

不同類型的任務會進入到對應的Event Queue

setTimeout or setInterval 會進入宏任務的Event Queue
Promise or process.nextTick會進入微任務的Event Queue

遇到 promise.then 之類的微任務，會讓這個微任務被安排在當前的宏任務中
當執行完一輪的同步+非同步腳本後，就往下一輪邁進

async/await

async/await 是什麼

我們創建了promise但不能同步等他執行完成。我們只能通過 then 傳一個 callback function，這樣很容易再次陷入 callback 地獄。所以實際上 async/await 在底層轉換了 Promise and then 的回調函數。也就是 Promise 的語法糖

async 是非同步的縮寫
await 是等待非同步方法執行完成

async/await 用來做啥優化 promise的回調問題

async/await 內部做了什麼

async 返回一個 Promise 物件，如果再函數中 return 一個直接量，async 會把這個量通過 Promise.resolve() 封裝成 Promise 物件。如果你返回 Promise 就以你返回的Promise為主
await 是等待，等待運行的返回值。await 後面通常是一個 Promise。但這不代表 await 後面只能跟非同步操作

await 等待機制

如果後面接了 Promise，就會阻塞後面的代碼，等著 Promise 對象 resolve，然後得到 resolve 值作為 await 表達式的運算結果

async/await 在什麼場景下使用

如果由 多個 Promise 組成的 then 鏈 時，就可以使用

async/await 分析方向

async 定義的是一個 Promise 函數，和普通函數一樣只要不調用就不會進入事件陣列
async 內部如果沒有主動 return promise，那 async 會把函數的返回值用 Promise 包裝
await 必須出現在 async 函數內，await 不一定要跟一個非同步操作，也可以是一個普通表達式
遇到 await 關鍵字，await 右邊的語句會立即被執行，然後 await 下面的代碼進入等待狀態，等待結果
await 後面如果不是 promise對象，await 會為阻塞後面的代碼，先執行 async外面的同步代碼，同步執行完後，再回來 async 內部，把這個非 promise 的東西，作為 await 表達式的結果
await 後面如果是 promise，await 也會暫停 async 後面的 code，先執行 async 外面的代碼，等著 Promise 對象 fulfilled，然後把 resolve 的參數作為 await 表達式的運算結果

分析原則

遇到 new Promise 是直接執行其任務
new Promise 接的 then 是微任務
await 會等到 async 內的事情都做完才往下做同個 function 內的事情
await function 會去驅動這個 function，function 做完，再往同層的同步走下去
async 回傳 Promise & async 中的 return 會被當作 resolve value
下面這串算同步指令

await new Promise((res){
    console.log('1')
})