Event Loop - JavaScript 運行非同步機制的重要元件

為什麼要認識 Event Loop ？

深入的瞭解 JavaScript 的運行機制，認識網頁渲染的優先順序。

背景知識

Program > Process > Thread

Program：Chrome
Process：各個分頁
Thread：JavaScript

JavaScript 的特性

瀏覽器運行 JavaScript 時是 Single Thread
Event Driven

常見資料結構

Stack 堆疊 LIFO Last-in, First-out
Quere 排隊 FIFO First-in, First-out

Single Thread 是什麼意思？

瀏覽器頁面中的 Process 只有一個 JavaScript 的 Thread ，所有的程式碼都會在 Stack 被執行，而且一次只會執行一個程式碼片段，這意味著程式碼只能從上到下，一行行執行，因為一次只能處理單個任務。

為什麼 JavaScript 是 Single Thread 運行？

如果 JavaScript 是 Multi-thread...兩個 thread 就可以操作同一個 DOM 那這個 DOM 要聽誰的？

JavaScript 最初是被設計成瀏覽器的腳本語言，用途是和用戶互動，操作 DOM API，這也造就了 Single Thread 的運行方式。

JavaScript 是 Single Thread 那要怎麼處理非同步的事件？

這就要說到 JavaScript 的另一個特性—— Event Driven

什麼是 Event Driven ？

JavaScript 在 Single Thread 的限制下，實踐非同步的一種方式。簡單來說，當事件被觸發，才會將程式加入執行的行列。

JavaScript 在瀏覽器中的運行機制？分為兩種任務拆成三個步驟進行循環。

雖然 JavaScript 是Single Thread ，但瀏覽器是 Multi-Thread，JavaScript 只要專心處理同步任務，其他交給瀏覽器大哥處理。

同步任務

Call Stack：永遠優先執行所有程式語言的運行方式，最後被呼叫的函式要先執行(最裡面的作用域)，才依序往回執行第一個函式。會優先執行可以立刻執行的任務，將需要等待的任務丟到 Web API 處理。

非同步任務 Event Driven

Web API：監聽事件如果事件發生，將任務丟到 Callback Queue 裡面等待。
Callback Queue：等待執行將 Web API 觸發的非同步事件依序排隊，放入緩存。等待 Call Stack 內的任務執行完成後，再將 Callback Queue 的任務加入 Call Stack。

什麼是 Event Loop ？

是連接 同步任務 與 非同步任務 的 重要元件。來回檢查 Call Stack 和 Callback Queue 有沒有任務需要執行。如果 Callback Queue 有任務在等待執行，就把他丟到 Call Stack 去執行，如果 Call Stack 的任務都執行完成了，就回去看看 Callback Queue 還有沒有任務需要執行，來回反復。

參考資料

Lidemy MTR01 L9-2 程式導師實驗計畫第二期：Week4-2 - JavaScript 《Inside look at modern web browser》導讀 Inside look at modern web browser (part 1) Program/Process/Thread 差異 JavaScript 运行机制详解：再谈Event Loop Javascript异步编程的4种方法 Javascript是单线程的深入分析

Lidemy / mentor-program-2nd-futianshen