Terry Yao's Blog

ROADMAP

ROADMAP

閱讀時間約 8 分鐘

CH4 · 瀏覽器平台 + WebAssembly 詳細 ROADMAP

計畫文件，不會被 Quartz 渲染。 回主 roadmap → frontend/ROADMAP.md

章節目標

瀏覽器是前端真正的運行時平台。建立完整的平台知識：從 DOM/BOM 到 Web Workers、從 Storage 到 PWA、從 WebSocket 到 WebRTC、從 History API 到 WebAssembly 與 WebGPU。讓讀者不只是「用框架寫 UI」，而是真的會駕馭瀏覽器提供的所有能力。

🌱 基本介紹

#主題SlugStage大綱
01瀏覽器如何運作⛔️ fundamentals/browser-mechanism🌿已有（跨系列）
02DOM⛔️ fundamentals/dom🌿已有（跨系列）
03BOM⛔️ fundamentals/bom🌿已有（跨系列）
04請求流程⛔️ fundamentals/browser-request-flow🌿已有（跨系列）
05Render Pipeline（渲染管線）05-render-pipeline🌱Parse HTML → DOM tree、CSSOM → Render tree → Layout → Paint → Composite、60fps 的 16.67ms 預算

❓ 為什麼需要

#主題SlugStage大綱
06為什麼需要 Web Workers（為什麼不能都在主線程）06-why-web-workers🌱JS 單線程、長運算會卡 UI、60fps 只有 16.67ms、運算型 task（影像處理、大資料解析、加密）需要 offload、主線程阻塞的實際症狀
07為什麼需要 Service Workers（PWA 解了什麼）07-why-service-workers🌱離線體驗、網路不穩的使用者、推播通知、攔截 fetch 做快取策略、PWA 基礎能力、為什麼 AppCache 被棄
08為什麼需要 Web Storage（Cookie 不夠嗎）08-why-web-storage🌱Cookie 每次 HTTP request 都跟著送、容量限制 4KB、安全性顧慮、localStorage / IndexedDB 各自解的問題
09為什麼需要 WebAssembly（JS 不能做到嗎）09-why-webassembly🌱JS 在 CPU-heavy 任務的極限、3D / 影像 / 加密 / AI 模型的需求、帶進 Rust/C++/Go 生態、near-native 效能、為什麼前幾年不熱、為什麼 AI 時代回歸
10為什麼需要 WebSocket / SSE（HTTP 不夠嗎）10-why-realtime🌱HTTP 請求-回應模型的限制、polling 的代價、即時通訊 / 通知 / 協作需求、WebSocket vs SSE 各自解什麼

🕰️ 演進

#主題SlugStage大綱
11儲存 API 演進11-storage-evolution🌱Cookie → localStorage → IndexedDB → Cache Storage → OPFS，每個解決前一個的什麼問題
12離線能力演進12-offline-evolution🌱AppCache（棄用）→ Service Worker → PWA → Local-first（CRDT、Yjs）
13即時通訊演進13-realtime-evolution🌱Long polling → Comet → WebSocket → SSE → WebRTC → WebTransport
14瀏覽器引擎演進14-browser-engine-evolution🌱Trident（IE）→ Blink（Chrome/Edge）→ WebKit（Safari）→ Gecko（Firefox），合併與分裂的歷史
15跨瀏覽器相容性演進15-cross-browser-evolution🌱IE 時代 → polyfill 時代 → Evergreen browsers → Baseline 概念（2023）、能不能再砍掉 polyfill 了

🧠 知識型

儲存

#主題SlugStage大綱
16Cookie16-cookie🌱屬性（Secure / HttpOnly / SameSite / Domain / Path）、用途、限制
17localStorage / sessionStorage17-web-storage🌱5MB 限制、同源、tab 分享差異、同步 API 的代價
18IndexedDB18-indexeddb🌱NoSQL on browser、transaction、index、promise wrapper（idb）
19Cache Storage19-cache-storage🌱Service Worker 的快取容器、策略（stale-while-revalidate）
20OPFS（Origin Private File System）20-opfs🌱2023+ 新，瀏覽器端檔案系統、適合 Wasm 大檔案

並發

#主題SlugStage大綱
21Web Workers21-web-workers🌱postMessage、worker 類型（Dedicated / Shared）、Comlink RPC
22Service Workers 深入22-service-workers🌱lifecycle（install / activate / fetch）、快取策略、推播
23SharedArrayBuffer / Atomics23-shared-memory🌱跨 Worker 共享記憶體、COOP/COEP 限制、Wasm threading

即時通訊

#主題SlugStage大綱
24WebSocket⛔️ fundamentals/websocket🌿已有（跨系列）
25Server-Sent Events25-sse🌱單向 server → client、自動重連、EventSource API
26WebRTC26-webrtc🌱P2P、音視訊、DataChannel、ICE/STUN/TURN 概念
27WebTransport27-webtransport🌱HTTP/3 over QUIC、低延遲串流、取代 WebSocket?

路由與歷史

#主題SlugStage大綱
28History API28-history-api🌱pushState / replaceState / popstate、SPA 路由基礎、scroll restoration

Device APIs

#主題SlugStage大綱
29Geolocation API29-geolocation🌱精度 vs 耗電、權限處理、watchPosition
30Notifications API30-notifications🌱桌面通知、權限、搭配 Service Worker 推播
31Fullscreen API31-fullscreen🌱requestFullscreen、CSS :fullscreen
32Screen Orientation / Wake Lock / Vibration / Battery32-device-misc🌱行動裝置相關 API 合輯、各自用途、支援度
33Clipboard API33-clipboard🌱navigator.clipboard、安全限制（secure context）、跟 CH1 Drag&Drop 連動
34File System Access API34-file-system-access🌱讀寫本地檔案、適合 editor 類應用、跟 OPFS 的差異
35Web Share API35-web-share🌱原生分享選單、行動裝置原生整合

可觀察性

#主題SlugStage大綱
36Intersection Observer36-intersection-observer🌱lazy load、infinite scroll、進出視窗偵測
37Mutation Observer37-mutation-observer🌱監視 DOM 變化、取代 deprecated Mutation Events
38Resize Observer38-resize-observer🌱元素尺寸變化（比 window.onresize 精準）
39Performance Observer39-performance-observer🌱Long Task、paint timing、CLS、LCP 指標收集

頁面生命週期

#主題SlugStage大綱
40原生 Lifecycle API40-page-lifecycle🌱DOMContentLoaded / load / beforeunload / pagehide / pageshow / visibilitychange / freeze / resume / online / offline / storage event、每個何時觸發

新平台能力

#主題SlugStage大綱
41WebAssembly 基礎41-wasm-basics🌱.wasm 二進位、JS 整合（instantiate）、記憶體模型、wasm-bindgen
42WebAssembly 實戰42-wasm-practice🌱Rust 編譯到 Wasm、跑 Python（Pyodide）、跑 AI 模型（transformers.js / ONNX runtime web）
43WebGPU43-webgpu🌱取代 WebGL、GPU 運算（不只繪圖）、跟 AI 推論連動
44WebXR44-webxr🌱VR/AR on browser、Vision Pro 相容
45WebCodecs / WebTransport 串流進階45-webcodecs🌱音視訊原生 codec、low-latency streaming

🔧 小實作注意事項

#主題SlugStage大綱
46離線優先 PWA 實作46-offline-pwa🌱Service Worker + Cache Storage + manifest.json 完整流程
47儲存選型實戰47-storage-selection🌱Cookie vs localStorage vs IndexedDB vs OPFS 實戰決策樹
48WebSocket 斷線重連策略48-websocket-reconnect🌱exponential backoff、heartbeat、message queue、order guarantee
49頁面可見性切換處理49-visibility-handling🌱省電暫停計時器、被背景化時保存狀態、freeze/resume 回應
50跨 Tab 通訊50-cross-tab-communication🌱BroadcastChannel / MessageChannel / SharedWorker / storage event 四種方案
51Wasm 整合 JS 實戰51-wasm-integration🌱從 Rust 專案到可用 npm package、wasm-pack、效能考量
52跑 AI 模型在瀏覽器52-browser-ai🌱transformers.js、WebGPU 加速、ONNX Runtime Web、隱私優勢

💣 Anti-pattern

#主題SlugStage大綱
53瀏覽器 API Anti-patterns53-browser-api-anti-patterns🌱大資料放 localStorage、同步 API 卡主線程、忘記權限 UX、濫用 beforeunload、Service Worker 快取不清

🧰 對應檢查工具

#主題SlugStage大綱
54瀏覽器平台檢查工具54-browser-tooling🌱Can I Use、Web.dev Baseline、Chrome Platform Status、Lighthouse PWA audit

📎 補充（niche / 進階 / 冷門但值得記錄）

#主題SlugStage大綱
S01Payment Request APIs01-payment-request🌱瀏覽器原生付款介面、Apple Pay / Google Pay 整合
S02Background Sync / Periodic Background Syncs02-background-sync🌱Service Worker 的定時 / 斷網重試機制
S03Credential Management API + Passkeyss03-passkeys🌱WebAuthn、Passkey 無密碼登入、跟 CH11 資安連動
S04WebUSB / WebBluetooth / Web Serial / WebHIDs04-web-hardware🌱硬體連接家族、IoT 應用、安全限制
S05Contact Picker APIs05-contact-picker🌱行動裝置讀通訊錄、權限 UX
S06Idle Detection APIs06-idle-detection🌱偵測使用者閒置、chat presence 類應用
S07Ambient Light / Gyroscope / Accelerometers07-sensors🌱環境光與運動感測器、遊戲 / AR 應用
S08Local Fonts Access APIs08-local-fonts🌱讀系統字型（需授權）、設計工具類應用
S09Broadcast Channel APIs09-broadcast-channel🌱跨 tab 同源通訊（已在 50 跨 Tab 通訊提過，這裡是獨立深入）

章節進度統計

  • 知識主題：54 + 9 補充 = 63 項
  • 🌿 growing：5（跨系列）
  • 🌱 seed：58

跨系列連結

  • → frontend/html/ CH1（Canvas / Web Components、媒體標籤）
  • → frontend/js/ CH3（Event Loop、async、Promise）
  • → frontend/framework/ CH6（SSR / RSC 用到 Service Worker / Streaming）
  • → frontend/security/ CH11（CSP、COOP/COEP、secure context）
  • → frontend/engineering/ CH9 F11（效能觀測對接 Performance Observer）
  • → W01 walkthroughs（SPA 路由用 History API）
  • → W05 CMS capstone（儲存、即時協作用 WebSocket、Wasm 加密）

關係圖譜

反向連結

  • ROADMAP

    Walkthroughs 詳細 ROADMAP 計畫文件，不會被 Quartz 渲染（無 frontmatter）。 公...