中級 Pro ⏱ 30:00
10-3 (付費) 幕後英雄：Event Loop 與 Web Workers
(Pro) 成為性能大師。揭秘 JavaScript 的異步心臟：Event Loop。學習如何使用 Web Workers 在後台處理運算，避免阻塞主執行緒。
10-3 (付費) 幕後英雄：Event Loop 與 Web Workers
👋 **老師的話 (Script)**:
"這是區分初階與中階工程師的分水嶺。
你可能聽說過 JS 是『單線程』的，但你有沒有想過，
如果只有一條路，JS 怎麼可能一邊跑動畫、一邊等網路請求、一邊監聽點擊？
今天我們要拆開瀏覽器的外殼，看看『事件循環 (Event Loop)』這個巨大的齒輪是怎麼轉動的。 我們還會學習如何召喚第二個幫手 —— Web Worker，來處理那些讓頁面卡死的重裝運算。“
1. 事件循環 (Event Loop) 原理
JS 執行環境分為三大部分：
- Stack (調用棧)：目前正在跑的函數。
- Task Queue (或是稱 Macro-task)：如
setTimeout,setInterval。 - Micro-task Queue：如
Promise.then,MutationObserver。
黃金順序：先跑 Stack -> 清空 Micro-task -> 跑一個 Macro-task -> 再次清空 Micro-task。
console.log("1"); // Stack
setTimeout(() => console.log("2"), 0); // Macro-task
Promise.resolve().then(() => console.log("3")); // Micro-task
console.log("4"); // Stack
// 結果順序：1, 4, 3, 22. 別阻塞主執行緒 (Main Thread)
如果你在主執行緒算 1 億次加法，使用者的網頁會直接死機，按鈕沒反應。 這叫 Blocking。
3. 解藥：Web Workers
Web Worker 讓你可以在另一個執行緒跑代碼，不影響 UI。
Main.js:
const worker = new Worker("worker.js");
worker.postMessage("開始算！");
worker.onmessage = (e) => console.log("算完了：", e.data);Worker.js:
onmessage = (e) => {
// 這裡可以做耗時運算
const result = heavyCalculation();
postMessage(result);
};
🧪 Lab 24: 順序猜測
給你一段包含
setTimeout, Promise, async function 的混合代碼。
請在不執行它的情況下，預測它的輸出順序。這是最經典的面試魔鬼題。