📄 JavaScript 事件循環（Event Loop）

💡 核心概念（清道夫鐵則）：

「執行完一個宏任務（包含主程式）後，Event Loop 的第一優先要務就是去微任務隊列『掃地』。必須把微任務隊列徹底清空，才能去拿取下一個宏任務。」

1. 為什麼需要 Event Loop？

JavaScript 是**單執行緒（Single-threaded）的語言，意味著它只有一個大腦，一次只能做一件事。為了解決遇到耗時任務（如網路請求、計時器）會「卡死」畫面的問題，瀏覽器提供了一套協調機制，讓 JS 能達到非阻塞（Non-blocking）**的異步操作，這套機制就是 Event Loop。

2. 三大核心運作區域

可以將瀏覽器環境想像成一個辦公室：

Call Stack（調用堆疊）— 目前的辦公桌
- 程式碼實際執行的地方。必須等桌上的工作（Stack）完全清空，才能接新工作。
Web APIs — 委外處理部門
- 瀏覽器提供的背景服務，負責處理 setTimeout、fetch、DOM 事件。處理完後，會把後續動作（Callback）丟去排隊。
Task Queues（任務隊列）— 等候室
- 委外任務完成後，回呼函式（Callback）排隊等待進入 Stack 的地方。分為「微任務」與「宏任務」兩個通道。

3. 任務分類與優先級 (Task Classification)

在 Event Loop 中，「類別」比「先來後到」更重要。

任務類別	特性說明	常見的 API
🚀 微任務 (Microtasks)	「頭等艙 VIP」
優先級極高。只要隊伍裡有任務，就必須一次性全部清空，哪怕執行中又產生新的微任務。	`Promise.then / .catch / .finally`
`queueMicrotask`
`process.nextTick` (Node.js)
`MutationObserver`
🚌 宏任務 (Macrotasks)	「經濟艙」
優先級較低。每次 Event Loop 循環只會抓出一個來執行。	`整體 <script> 主程式`
`setTimeout` / `setInterval`
`DOM 事件` (click, input 等)
網路請求 (Ajax / fetch)

4. 標準執行流程 (Event Loop Tick)

一個完整的事件循環步驟如下：

執行第一個宏任務：將整段主程式（Main Script）推入 Call Stack 執行直到結束。
清空微任務 (Microtask Checkpoint)：主程式清空後，Event Loop 立即檢查並徹底清空微任務隊列。
畫面渲染 (Rendering)：如果瀏覽器判斷需要更新 UI，會在此時進行。
執行下一個宏任務：從宏任務隊列的最前端取出「一個」任務執行。