[TOC] # 線程與進程 ## 概念 我們經常說JS 是單線程執行的，指的是一個進程里只有一個主線程，那到底什么是線程？什么是進程？ 官方的說法是：**進程是 CPU資源分配的最小單位；線程是 CPU調度的最小單位**。這兩句話并不好理解，我們先來看張圖：  * 進程好比圖中的工廠，有單獨的專屬自己的工廠資源。 * 線程好比圖中的工人，多個工人在一個工廠中協作工作，工廠與工人是 1:n的關系。也就是說**一個進程由一個或多個線程組成，線程是一個進程中代碼的不同執行路線**； * 工廠的空間是工人們共享的，這象征**一個進程的內存空間是共享的，每個線程都可用這些共享內存**。 * 多個工廠之間獨立存在。 <br> ## 多進程與多線程 * 多進程：在同一個時間里，同一個計算機系統中如果允許兩個或兩個以上的進程處于運行狀態。多進程帶來的好處是明顯的，比如你可以聽歌的同時，打開編輯器敲代碼，編輯器和聽歌軟件的進程之間絲毫不會相互干擾。 * 多線程：程序中包含多個執行流，即在一個程序中可以同時運行多個不同的線程來執行不同的任務，也就是說允許單個程序創建多個并行執行的線程來完成各自的任務。 以Chrome瀏覽器中為例，當你打開一個 Tab 頁時，其實就是創建了一個進程，一個進程中可以有多個線程（下文會詳細介紹），比如渲染線程、JS 引擎線程、HTTP 請求線程等等。當你發起一個請求時，其實就是創建了一個線程，當請求結束后，該線程可能就會被銷毀。 <br> <br> # 瀏覽器內核 簡單來說瀏覽器內核是通過取得頁面內容、整理信息（應用CSS）、計算和組合最終輸出可視化的圖像結果，通常也被稱為渲染引擎。 瀏覽器內核是多線程，在內核控制下各線程相互配合以保持同步，一個瀏覽器通常由以下常駐線程組成： * GUI 渲染線程 * JavaScript引擎線程 * 定時觸發器線程 * 事件觸發線程 * 異步http請求線程 <br> ## GUI渲染線程 * 主要負責頁面的渲染，解析HTML、CSS，構建DOM樹，布局和繪制等。 * 當界面需要重繪或者由于某種操作引發回流時，將執行該線程。 * 該線程與JS引擎線程互斥，當執行JS引擎線程時，GUI渲染會被掛起，當任務隊列空閑時，主線程才會去執行GUI渲染。 <br> ## JS引擎線程 * 該線程當然是主要負責處理 JavaScript腳本，執行代碼。 * 也是主要負責執行準備好待執行的事件，即定時器計數結束，或者異步請求成功并正確返回時，將依次進入任務隊列，等待 JS引擎線程的執行。 * 當然，該線程與 GUI渲染線程互斥，當 JS引擎線程執行 JavaScript腳本時間過長，將導致頁面渲染的阻塞。 <br> ## 定時器觸發線程 * 負責執行異步定時器一類的函數的線程，如： setTimeout，setInterval。 * 主線程依次執行代碼時，遇到定時器，會將定時器交給該線程處理，當計數完畢后，事件觸發線程會將計數完畢后的事件加入到任務隊列的尾部，等待JS引擎線程執行。 <br> ## 事件觸發線程 * 主要負責將準備好的事件交給 JS引擎線程執行。 比如 setTimeout定時器計數結束， ajax等異步請求成功并觸發回調函數，或者用戶觸發點擊事件時，該線程會將整裝待發的事件依次加入到任務隊列的隊尾，等待 JS引擎線程的執行。 <br> ## 異步http請求線程 * 負責執行異步請求一類的函數的線程，如： Promise，axios，ajax等。 * 主線程依次執行代碼時，遇到異步請求，會將函數交給該線程處理，當監聽到狀態碼變更，如果有回調函數，事件觸發線程會將回調函數加入到任務隊列的尾部，等待JS引擎線程執行。 <br> <br> # 為什么要有event loop 因為Javascript設計之初就是一門單線程語言，因此為了實現主線程的不阻塞，Event Loop這樣的方案應運而生。 當然，現如今人們也意識到，單線程在保證了執行順序的同時也限制了javascript的效率，因此開發出了web worker技術。這項技術號稱讓javascript成為一門多線程語言。 然而，使用web worker技術開的多線程有著諸多限制，例如：所有新線程都受主線程的完全控制，不能獨立執行。這意味著這些“線程” 實際上應屬于主線程的子線程。另外，這些子線程并沒有執行I/O操作的權限，只能為主線程分擔一些諸如計算等任務。所以嚴格來講這些線程并沒有完整的功能，也因此這項技術并非改變了javascript語言的單線程本質。 <br /> <br /> # 瀏覽器的event loop ## 1.Micro-Task 與 Macro-Task 瀏覽器端事件循環中的異步隊列有兩種：macro（宏任務）隊列和 micro（微任務）隊列。**宏任務隊列可以有多個，微任務隊列只有一個**。 * 常見的 macro-task 比如：setTimeout、setInterval、script（整體代碼）、 I/O 操作、UI 渲染等。 * 常見的 micro-task 比如: new Promise().then(回調)、MutationObserver、await（可以轉化為Promise） 等。 <br> ## Event Loop 過程解析 一個完整的 Event Loop 過程，可以概括為以下階段：  * 一開始執行棧空,我們可以把**執行棧認為是一個存儲函數調用的棧結構，遵循先進后出的原則**。micro 隊列空，macro 隊列里有且只有一個 script 腳本（整體代碼）。 * 全局上下文（script 標簽）被推入執行棧，同步代碼執行。在執行的過程中，會判斷是同步任務還是異步任務，通過對一些接口的調用，可以產生新的 macro-task 與 micro-task，它們會分別被推入各自的任務隊列里。同步代碼執行完了，script 腳本會被移出 macro 隊列，這個過程本質上是隊列的 macro-task 的執行和出隊的過程。 * 上一步我們出隊的是一個 macro-task，這一步我們處理的是 micro-task。但需要注意的是：當 macro-task 出隊時，任務是**一個一個**執行的；而 micro-task 出隊時，任務是**一隊一隊**執行的。因此，我們處理 micro 隊列這一步，會逐個執行隊列中的任務并把它出隊，直到隊列被清空。 * **執行渲染操作，更新界面** * 檢查是否存在 Web worker 任務，如果有，則對其進行處理 * 上述過程循環往復，直到兩個隊列都清空 <br>  <br> **當某個宏任務執行完后,會查看是否有微任務隊列。如果有，先執行微任務隊列中的所有任務，如果沒有，會讀取宏任務隊列中排在最前的任務，執行宏任務的過程中，遇到微任務，依次加入微任務隊列。棧空后，再次讀取微任務隊列里的任務，依次類推。** <br> ## 2個script中執行 setTimeout、Promise ~~~ setTimeout(()=>{ console.log('timer1') Promise.resolve().then(function() { console.log('promise1') }) }, 0) setTimeout(()=>{ console.log('timer2') Promise.resolve().then(function() { console.log('promise2') }) }, 0) ~~~  <br> <br> ~~~ <script> console.log('1'); setTimeout(function () { console.log('2'); new Promise(function (resolve) { console.log('4'); resolve(); }).then(function () { console.log('5') }) }) new Promise(function (resolve) { console.log('7'); resolve(); }).then(function () { console.log('8') }) setTimeout(function () { console.log('9'); new Promise(function (resolve) { console.log('11'); resolve(); }).then(function () { console.log('12') }) }) </script> <script> console.log('a'); setTimeout(function () { console.log('b'); new Promise(function (resolve) { console.log('c'); resolve(); }).then(function () { console.log('d') }) }) new Promise(function (resolve) { console.log('e'); resolve(); }).then(function () { console.log('f') }) setTimeout(function () { console.log('g'); new Promise(function (resolve) { console.log('h'); resolve(); }).then(function () { console.log('i') }) }) </script> ~~~ <br> 結果為 ~~~ 1 7 8 a e f 2 4 5 9 11 12 b c d g h i ~~~ ### 解析 可以將2個script標簽替換為setTimeout來理解 1. 2個script作為第一、二個宏任務進入主線程，記為macro1、macro2 2. 執行macro1中的同步任務，遇到`console.log`，**輸出1** 3. 遇到`setTimeout`，其回調函數被分發到宏任務Event Queue中。記為macro3 4. 遇到Promise，new Promise直接執行，**輸出7**。then被分發到微任務Event Queue中。我們記為micro1。 5. 遇到了setTimeout，其回調函數被分發到宏任務Event Queue中，記為macro4 6. 下表是第一輪事件循環宏任務結束時各Event Queue的情況，此時已經輸出了1和7。 | macro | micro | | --- | --- | | macro2 | micro1 | | macro3 | | | macro4 | | 7. 執行micro1，**輸出8** 8. 微任務隊列清空，執行下一個宏任務 9. 執行macro2（即第二個script標簽）的同步任務，遇到`console.log`，**輸出a** 10. 遇到`setTimeout`，其回調函數被分發到宏任務Event Queue中。記為macro5 11. 遇到Promise，new Promise直接執行，**輸出e**。then被分發到微任務Event Queue中。我們記為micro2。 12. 遇到了setTimeout，其回調函數被分發到宏任務Event Queue中，記為macro6 13. 下表是第二輪事件循環宏任務結束時各Event Queue的情況，此時已經輸出了1 7 8 a e。 | macro | micro | | --- | --- | | macro3 | micro2 | | macro4 | | | macro5 | | | macro6 | | 14. 執行micro2，**輸出f** 15. 微任務隊列清空，執行下一個宏任務 16. 執行macro3，遇到console，**輸出2** 17. 遇到Promise，**輸出4**，then被分發到微任務Event Queue中。我們記為micro3。 18. 執行微任務micro3，**輸出5** 19. 執行macro4，遇到console，**輸出9** 20. 遇到Promise，**輸出11**，then被分發到微任務Event Queue中。我們記為micro4。 21. 執行微任務micro4，**輸出12** 22. 剩下的依次執行macro5、macro6，流程與macro3、macro4相同 <br> ## async、await ~~~ async function async1() { console.log('async1 start') await async2() console.log('async1 end') } async function async2() { console.log('async2') } console.log('script start') setTimeout(() => { console.log('setTimeout') }, 0); async1() new Promise(function (resolve) { console.log('promise1') resolve() }).then(() => { console.log('promise2') }) console.log('script end') ~~~ 瀏覽器和Node返回結果相同，注意遇到 `await` 會立即執行，阻塞外部代碼的同步代碼 ~~~ script start async1 start async2 promise1 script end async1 end promise2 setTimeout ~~~ <br> <br> ~~~ async function async1(){ await async2() console.log('async1 then1 end') console.log('async1 then2 end') } async function async2 () {console.log('async2 function')} async1(); new Promise(function(resolve){ resolve(); }).then(function(){ console.log('promise2') }).then(function() { console.log('promise3') }).then(function() { console.log('promise4') }) .then(function () { console.log('promise5') }) ~~~ Node 8.12.0、Chrome 72返回 ~~~ async2 function async1 then1 end async1 then2 end promise2 promise3 promise4 promise5 ~~~ 而在 Node 10.11.0、Chrome 70 上返回 ~~~ async2 function promise2 promise3 async1 then1 end async1 then2 end promise4 promise5 ~~~ ### 關于73以下版本和73版本的區別 * 在老版本版本以下，先執行`promise1`和`promise2`，再執行`async1`。 * 在73版本，先執行`async1`再執行`promise1`和`promise2`。 **主要原因是因為在谷歌(金絲雀)73版本中更改了規范，如下圖所示：**  * 區別在于`RESOLVE(thenable)`和`Promise.resolve(thenable)`之間的區別。 **在老版本中** * 首先，傳遞給 `await` 的值被包裹在一個 `Promise` 中。然后，處理程序附加到這個包裝的 `Promise`，以便在 `Promise` 變為 `fulfilled` 后恢復該函數，并且暫停執行異步函數，一旦 `promise` 變為 `fulfilled`，恢復異步函數的執行。 * 每個 `await` 引擎必須創建兩個額外的 Promise（即使右側已經是一個 `Promise`）并且它需要至少三個 `microtask` 隊列 `ticks`（`tick`為系統的相對時間單位，也被稱為系統的時基，來源于定時器的周期性中斷（輸出脈沖），一次中斷表示一個`tick`，也被稱做一個“時鐘滴答”、時標。）。 **引用賀老師知乎上的一個例子** ~~~ async function f() { await p console.log('ok') } ~~~ 簡化理解為： ~~~ function f() { return RESOLVE(p).then(() => { console.log('ok') }) } ~~~ * 如果 `RESOLVE(p)` 對于 `p` 為 `promise` 直接返回 `p` 的話，那么 `p`的 `then` 方法就會被馬上調用，其回調就立即進入 `job` 隊列。 * 而如果 `RESOLVE(p)` 嚴格按照標準，應該是產生一個新的 `promise`，盡管該 `promise`確定會 `resolve` 為 `p`，但這個過程本身是異步的，也就是現在進入 `job` 隊列的是新 `promise` 的 `resolve`過程，所以該 `promise` 的 `then` 不會被立即調用，而要等到當前 `job` 隊列執行到前述 `resolve` 過程才會被調用，然后其回調（也就是繼續 `await` 之后的語句）才加入 `job` 隊列，所以時序上就晚了。 **谷歌（金絲雀）73版本中** * 使用對`PromiseResolve`的調用來更改`await`的語義，以減少在公共`awaitPromise`情況下的轉換次數。 * 如果傳遞給 `await` 的值已經是一個 `Promise`，那么這種優化避免了再次創建 `Promise` 包裝器，在這種情況下，我們從最少三個 `microtick` 到只有一個 `microtick`。 ### 詳細過程 **73以下版本** * 首先，打印`script start`，調用`async1()`時，返回一個`Promise`，所以打印出來`async2 end`。 * 每個 `await`，會新產生一個`promise`,但這個過程本身是異步的，所以該`await`后面不會立即調用。 * 繼續執行同步代碼，打印`Promise`和`script end`，將`then`函數放入**微任務**隊列中等待執行。 * 同步執行完成之后，檢查**微任務**隊列是否為`null`，然后按照先入先出規則，依次執行。 * 然后先執行打印`promise1`,此時`then`的回調函數返回`undefinde`，此時又有`then`的鏈式調用，又放入**微任務**隊列中，再次打印`promise2`。 * 再回到`await`的位置執行返回的 `Promise` 的 `resolve` 函數，這又會把 `resolve` 丟到微任務隊列中，打印`async1 end`。 * 當**微任務**隊列為空時，執行宏任務,打印`setTimeout`。 **谷歌（金絲雀73版本）** * 如果傳遞給 `await` 的值已經是一個 `Promise`，那么這種優化避免了再次創建 `Promise` 包裝器，在這種情況下，我們從最少三個 `microtick` 到只有一個 `microtick`。 * 引擎不再需要為 `await` 創造 `throwaway Promise` - 在絕大部分時間。 * 現在 `promise` 指向了同一個 `Promise`，所以這個步驟什么也不需要做。然后引擎繼續像以前一樣，創建 `throwaway Promise`，安排 `PromiseReactionJob` 在 `microtask` 隊列的下一個 `tick` 上恢復異步函數，暫停執行該函數，然后返回給調用者。 ### Chrome 72以下 async 轉換為 Promise 過程 `resolve(thenable)`和`Promise.resolve(thenable)`的轉換關系是這樣的 ~~~ new Promise(resolve=>{ resolve(thenable) }) ~~~ 會被轉換成 ~~~ new Promise(resolve => { Promise.resolve().then(() => { thenable.then(resolve) }) }) ~~~ 所以`async1`就變成了這樣： ~~~ async function async1() { return new Promise(resolve => { Promise.resolve().then(() => { async2().then(resolve) }) }).then(() => { console.log('async1 end') }) } ~~~ 同樣，因為`resolve()`就等價于`Promise.resolve()`,所以 ~~~ new Promise(function(resolve){ resolve(); }) ~~~ 等價于 ~~~ Promise.resolve() ~~~ 所以題目等價于 ~~~ async function async1 () { return new Promise(resolve => { Promise.resolve().then(() => { async2().then(resolve) }) }).then(() => { console.log('async1 end') }) } async function async2 () {} async1() Promise.resolve() .then(function () { console.log('promise2') }) .then(function () { console.log('promise3') }) .then(function () { console.log('promise4') }) ~~~ ### 結論 在 chrome canary 73及未來可能被解析為 ~~~ async function async1 () { async2().then(() => { console.log('async1 end') }) } async function async2 () {} async1() new Promise(function (resolve) { resolve() }) .then(function () { console.log('promise2') }) .then(function () { console.log('promise3') }) .then(function () { console.log('promise4') }) //async1 end //promise2 //promise3 //promise4 ~~~ 在 chrome 70 被解析為， ~~~ async function async1 () { return new Promise(resolve => { Promise.resolve().then(() => { async2().then(resolve) }) }).then(() => { console.log('async1 end') }) } async function async2 () {} async1() Promise.resolve() .then(function () { console.log('promise2') }) .then(function () { console.log('promise3') }) .then(function () { console.log('promise4') }) //promise2 //promise3 //async1 end //promise4 ~~~ <br /> <br /> # timer [MDN的setTimeout文檔](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout)中提到HTML規范最低延時為4ms： > In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the minimum timeout value for nested timeouts was 10 ms. （補充說明：最低延時的設置是為了給CPU留下休息時間） ~~~ setTimeout(() => { console.log(2) }, 2) setTimeout(() => { console.log(1) }, 1) setTimeout(() => { console.log(0) }, 0) // 輸出結果為 1、0、2 ~~~ <br /> ## Chrome中的timer ~~~ // https://chromium.googlesource.com/chromium/blink/+/master/Source/core/frame/DOMTimer.cpp#93 double intervalMilliseconds = std::max(oneMillisecond, interval * oneMillisecond); ~~~ 這里interval就是傳入的數值，可以看出傳入0和傳入1結果都是oneMillisecond，即1ms。 這樣解釋了為何1ms和0ms行為是一致的，那4ms到底是怎么回事？我再次確認了HTML規范，發現雖然有4ms的限制，但是是存在條件的，詳見規范第11點： > If nesting level is greater than 5, and timeout is less than 4, then set timeout to 4. > 如果嵌套級別大于5，并且timeout 小于4，則將timeout設置為4。 MDN英文文檔的說明也已經貼合了這個規范。 <br /> ## Node中的timer ~~~ // https://github.com/nodejs/node/blob/v8.9.4/lib/timers.js#L456 if (!(after >= 1 && after <= TIMEOUT_MAX)) after = 1; // schedule on next tick, follows browser behavior ~~~ <br /> <br /> ## 應用 如果從規范來看，microtask優先于task執行。那如果有需要優先執行的邏輯，放入microtask隊列會比task更早的被執行，這個特性可以被用于在框架中設計任務調度機制。 如果從node的實現來看，如果時機合適，microtask的執行甚至可以阻塞I/O，是一把雙刃劍。 綜上，高優先級的代碼可以用Promise/process.nextTick注冊執行。 <br /> <br /> # 執行效率 從node的實現來看，setTimeout這種timer類型的API，需要創建定時器對象和迭代等操作，任務的處理需要操作小根堆，時間復雜度為O(log(n))。而相對的，process.nextTick和setImmediate時間復雜度為O(1)，效率更高。 如果對執行效率有要求，優先使用process.nextTick和setImmediate。 <br /> <br /> # 參考資料 * [一次弄懂Event Loop（徹底解決此類面試問題）](https://juejin.im/post/5c3d8956e51d4511dc72c200) * [瀏覽器與Node的事件循環(Event Loop)有何區別?](https://juejin.im/post/5c337ae06fb9a049bc4cd218) * [這一次，徹底弄懂 JavaScript 執行機制](https://juejin.im/post/59e85eebf265da430d571f89) * [Event Loop的規范和實現](https://zhuanlan.zhihu.com/p/33087629) * [前端面試之道 - 掘金小冊](https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5be04a8e6fb9a04a072fd2cd) * [Tasks, microtasks, queues and schedules - JakeArchibald.com](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) * [更快的異步函數和 Promise](https://v8.js.cn/blog/fast-async/) * [async await 和 promise微任務執行順序問題](https://segmentfault.com/q/1010000016147496)