資料來源與整理脈絡#

本筆記整合了三條前端學習主軸：前端核心技術問答（Frontend Q&A 廣度導覽）、Web 效能優化專題、以及 Chrome DevTools 實戰調試技巧。三個來源原本各自獨立，這裡採「廣度建構 mental model ➡️ 工程化優化策略 ➡️ 工具量測與診斷」三層遞進結構，把概念、實作與觀測手法整合在同一個知識體。與市面上常見「依框架（React/Vue）切入」或「面試題羅列」的資源不同，此處刻意以瀏覽器原理（Browser Internals）與 Core Web Vitals 為主軸，強調「為何如此設計」與「如何量測」的工程閉環。

完整摘要#

筆記主軸的概念骨架可分為三個遞進層次。第一層是「前端技術」（01-frontend），從超文本標記語言（HTML）的語義化、串接樣式表（CSS, Cascading Style Sheets）的選擇器與盒模型，到 JavaScript 的型別系統、作用域、閉包與 Promise，再延伸到瀏覽器渲染流程（DOM 樹 ➡️ CSSOM ➡️ Render Tree ➡️ Layout ➡️ Paint ➡️ Composite）、HTTP/HTTPS 協定、事件機制與前端工程化（工具鏈、模組化、架構模式），最後以後端銜接議題（npm、Node.js 事件迴圈、REST 與 GraphQL）收束。第二層是「Web 前端效能優化」（02-performance-optimization），以 Core Web Vitals 與 RAIL 模型為度量基準，依序展開資源優化（壓縮、圖片格式、Sprites、GPU 加速）、載入策略（Resource Hints、Lazy Loading、Code Splitting、Tree Shaking）、快取機制（HTTP Caching、Service Worker、App Shell、Stale-While-Revalidate）、網路層（CDN、HTTP/2 與 HTTP/3），終以渲染流程、Web Worker、WebAssembly、SSR/CSR/Edge、記憶體管理等進階主題作結。第三層是「前端 Debug 技巧」（03-debugging），逐一拆解 Chrome DevTools 九個 panel：Elements、Console、Sources（含 Source Map、Workspace、Breakpoint）、Network、Performance、Cookies/CORS、Device Simulation、Image Optimization。三章之間互為閉環：第一章建立心智模型，第二章提供優化策略，第三章用工具完成量測與診斷。

適用情境與閱讀路徑#

本筆記適合三類讀者：（1）後端轉前端的工程師，建議從 01-frontend/04-browser-principles 切入，先理解 URL 到畫面的完整流程，再回頭補 HTML/CSS/JS 基礎；（2）需要做效能調校的開發者，直接讀 02-performance-optimization，並搭配 03-debugging/06-performance 學習 DevTools 的量測手法；（3）日常開發需要快速查找 debug 技巧者，把 03-debugging 當 panel 速查表。讀完應能掌握瀏覽器運作原理、Core Web Vitals 度量體系，以及一套可重複的「建構—優化—量測」工程閉環。