🧩 用 Web Modern 重現作業系統：從 Event Loop 到 React Fiber 的現代啟示

⚙️ 前言：作業系統，其實藏在每個網頁裡

如果你覺得「作業系統」很遙遠，那你可能還沒意識到——
每個現代網站，其實就是一個迷你作業系統 (Micro OS)。

台大資工所的 OS 題目，像是：

• Round-Robin 排程
• Semaphore / Mutex 同步
• Deadline Scheduling
• Pipeline Hazard

這些看似「硬派」的題，其實都在教一件事：

🧠「如何讓有限資源同時處理多任務而不亂套？」

而這，正是 Web Modern（現代網頁架構）每天在幹的事。

🧵 一、Event Loop：JavaScript 的「排程系統」

🎯 傳統 OS 排程

作業系統中，CPU 要公平分配給多個 process。
→ 這就是 Round-Robin Scheduling：輪流執行、切片切換。

💡 Web Modern 對應

JavaScript 在瀏覽器中也有「CPU」——就是 Event Loop。
它負責決定：
1️⃣ 哪個任務（callback）先跑？
2️⃣ 哪個放進 microtask（Promise）？
3️⃣ 哪個丟到 macrotask（setTimeout）？

🔍 對應概念：

💬 結論：
瀏覽器的 Event Loop = JavaScript 的作業系統核心。

🔒 二、Mutex 與 Semaphore：避免資料撞車

🎯 傳統 OS

當兩個 process 同時寫同一個檔案 → 發生 race condition。
→ 需要上鎖（mutex / semaphore）保證安全。

💡 Web Modern 對應

Web 應用中：

• 兩個頁籤同時更新 localStorage
• 多個 Worker 同步資料
• API 呼叫同一資源導致版本衝突

這些問題都需要「非同步鎖」來防止資料錯亂。

🧠 解法：
js
const mutex = new Mutex();
await mutex.lock();
try {
await updateData();
} finally {
mutex.unlock();
}

這段程式其實就像作業系統裡的 P/V 操作。
→ 用 async/await 模擬 semaphore。

⏱ 三、Deadline Monotonic：前端任務排程的優先權管理

🎯 傳統 OS

即時系統（Real-Time OS）需要確保：

所有任務在 Deadline 內完成。

題目會問你：
「如果某任務延長 X 單位時間，是否仍能準時？」

💡 Web Modern 對應

在瀏覽器中，這概念就叫：

任務切片 (Task Slicing) 或 Idle Callback。

例如 React Fiber：

將渲染任務切成小片段 (unit of work)

若使用者滑動或輸入，優先執行高優先任務

待 CPU 空閒時再恢復低優先任務

💬 對應公式：

作業系統 React Fiber

Ready Queue Work Loop
Deadline Frame Budget (~16ms)
Priority Queue Fiber Priority Tree

🚦 四、Pipeline Hazard：前端渲染的「資料依賴衝突」

🎯 傳統 OS 題型

CPU Superscalar 處理兩條指令，但有依賴衝突 → pipeline stall。
→ 問「浪費幾個 cycle？」

💡 Web Modern 對應

瀏覽器渲染管線：

JS → Style → Layout → Paint → Composite

如果中途 DOM 改變，Layout 重新跑一次，整個 pipeline 卡住。
→ 這就是「reflow / repaint hazard」。

🧠 最佳化策略：

減少 reflow：批次操作 DOM。

避免連續改樣式屬性。

使用 requestAnimationFrame() 控制渲染節奏。

💬 一句話：

「CPU pipeline hazard」=「瀏覽器 reflow 慢卡卡」

⚙️ 五、Thread Pool 與 Web Worker：分散式排程的實作

🎯 傳統 OS

多執行緒系統（multithreading）用 thread pool 管理資源。
每個核心同時跑不同任務。

💡 Web Modern 對應

在網頁中，Web Worker / Service Worker 就是 thread。
但 JavaScript 是單執行緒的，怎麼解？
→ 把重運算任務丟到 Worker 背景執行。

🧩 範例：

const worker = new Worker("worker.js");
worker.postMessage({ task: "heavy" });
worker.onmessage = (e) => console.log(e.data);

這就是把 OS 的「平行任務」概念，搬進前端世界。

🌐 六、Web Modern ≈ 微型作業系統架構

OS 組件 Web Modern 對應 實際例子

Scheduler Event Loop JS 任務執行順序
Memory Manager Garbage Collector 釋放未用變數
Thread Web Worker 平行任務
File System IndexedDB / Cache API 離線資料管理
IPC (進程通訊) postMessage / SharedArrayBuffer 前後端資料交換

💬 結論：

「每個現代網頁，都是一個分散式作業系統。」

🚀 七、結語：下一代工程師的核心能力

未來的前端工程師，不只是畫面設計師。
你要理解 CPU 怎麼運作、任務怎麼排程、資料怎麼鎖住。

🌍 Web Modern 是：

作業系統的演化

雲端的延伸

使用者互動的即時核心

💬 一句話總結：
「作業系統教你控制 CPU，Web Modern 教你控制世界。」