Quick overview of the JavaScript event loop

•3 min read
javascriptevent-loopmicrotasksmacrotasks
Back

event loop

javascript 處理非同步任務的機制，其組成包含：

Heap

用來存放複雜類型資料的空間，例如：物件或陣列引用類型的值

在 function 內部建立物件、陣列等引用類型的資料，也會放至 heap 中，其對應的 reference 會存在 execution context 內，這些 reference 會在 function 執行結束後，被 gc 處理，藉此釋放不需要的記憶體空間

Call stack

用於追蹤執行中的 function 及 execution context

Web API

瀏覽器提供處理非同步任務的接口，當非同步任務完成時，其 callback function 會被放入對應的 queue 等待執行

queue 分為兩種類型：

Macrotask queue

macrotask 包含：

Microtask queue

優先級高於 macrotask 的任務，每個 macrotask 執行完畢後，會立即處理 microtask queue 內的所有任務，直到 microtask queue 為空

microtask 包含：

Event Loop

簡易的運作流程如下：

  1. 當 javascript engine 開始執行 scripts
    • 同步的操作，放入 call stack 執行
    • 非同步的操作，透過 web api 在背景處理。非同步任務完成後，會將 callback 放置在對應的 queue 上等待執行
  2. 當 call stack 為空
    1. 取出第一個 microtask，放入 call stack 執行，重複此步驟，直到 microstak queue 為空
    2. 取出第一個 macrotask，放入 call stack 執行，執行完成後，檢查 microtask queue 是否有新的 microtask
      1. 如果有，重複 2.1 的步驟，直到 microtask queue 為空
      2. 如果沒有，重複 2.2 的步驟，執行下一個 macrotask
  3. 重複上述步驟

Reference