event-loop-queue-vs-job-queue.md

🌀 Event Loop Queue vs Job Queue 差異說明

項目	Event Loop Queue（Macro Task Queue）	Job Queue（Micro Task Queue）
📌 又稱	Task Queue / Callback Queue	Microtask Queue / Job Queue
🎯 負責處理	setTimeout、setInterval、I/O callbacks、DOM Events 等	Promise.then()、queueMicrotask()、MutationObserver
⏳ 執行時機	每輪事件循環的最後階段才會執行	每個 task 執行結束後立即清空 microtasks
🥇 優先順序	較低，等微任務執行完才會輪到它	較高，會優先執行完所有 microtasks 才會進入下一個 macro task
✅ 用途	處理整體非同步任務	處理細粒度更新、異步邏輯鏈接

📊 執行順序圖（事件循環階段）

[ 呼叫堆疊空了 ]
       ↓
[ 清空所有 Microtasks（Job Queue） ]
       ↓
[ 執行下一個 Macro Task（Event Loop Queue） ]
       ↓
[ 清空 Microtasks ]
       ↓
... 如此循環

🧪 範例

console.log('1'); // 同步

setTimeout(() => {
  console.log('4');
}, 0); // 放入 Task Queue

Promise.resolve().then(() => {
  console.log('3');
}); // 放入 Job Queue

console.log('2'); // 同步

參考

JavaScript execution model

當我們談論「異步編程（Asynchronous Programming）」時，重點就是「不會阻塞主線程」，也就是說，我們可以執行一些耗時操作（如 API 請求、計時器、I/O 操作等）而不會卡住整個應用的運作。

Promise 是 JavaScript 中用來處理異步操作的一種物件，它代表某個未來才會完成（resolve）或失敗（reject）的操作。

async/await 是 Promise 的語法糖，用來讓異步程式碼看起來像同步的寫法，讓程式碼更容易閱讀與維護。