今晚來點 Web 前端效能優化大補帖：從效能優化掌握前端開發的底層邏輯 全彩版（iThome鐵人賽系列書）

莫力全 Kyle Mo

我是 Kyle，也可以叫我老莫，目前在資安外商擔任軟體工程師，主要專注在 Web 開發領域。有個目標是 32 歲不當軟體工程師（寫這段文字的當下我 28 歲），希望能在短暫的人生中多多體驗不同可能性。有熟悉身心靈領域的朋友跟我說我的靈魂是一條充滿生命熱力的「覺醒之蛇」。我來這裡是為了打破「循規蹈矩」的框架，並教會人們如何活得更真、愛得更自由。當然有目標是一回事，能否成功又是另外一回事了，但相信探索的過程會充滿有趣的故事，歡迎大家來跟我交流！

2020 年於 Medium 發表〈今晚，我想來點 Web 前端效能優化大補帖！〉，分享許多前端知識及優化技巧。並於 2021 年以同主題參加 iThome 鐵人賽，獲得 Modern Web 組冠軍。

▍Email：
oldmo860617@gmail.com

▍Medium：
https://medium.com/@oldmo860617

▍IG：
kylemo.dev.life

推薦序一
推薦序二
推薦序三
第二版 自序

Ch00 寫在旅程之前，讓我們先理解底層邏輯

Ch01 認識前端效能優化與衡量指標 Planning And Metrics
1-1 前端效能優化為什麼如此重要？
1-2 效能的監控工具 ─ Performance Analyzers
1-3 衡量前端效能的重要指標：Core Web Vitals
1-4 從使用者的角度出發 ─ RAIL Model

Ch02 網頁資源優化 Assets Optimization
2-1 程式碼最佳化
2-2 圖片資源最佳化
2-3 檔案壓縮 File Compression
2-4 可適性服務 Adaptive Serving

Ch03 渲染流程優化 Render Process Optimization
3-1 瀏覽器的架構演進史
3-2 瀏覽器渲染引擎的運作機制
3-3 控制 Script 的載入時機 ─ Non-blocking Script
3-4 優化資源的載入時機 ─ Resource Hints
3-5 減輕渲染的負擔 ─ Virtualized List
3-6 延遲載入 Lazy Loading
3-7 CSS 也會影響效能！寫出高效能的 CSS
3-8 硬體加速 ─ CSS GPU Acceleration

Ch04 組建流程優化 Build Process Optimization
4-1 拆分應用的 Bundle ─ Code Splitting & Dynamic Import
4-2 移除用不到的程式碼 ─ Tree Shaking
4-3 犧牲支援度減少 Bundle Size ─ Polyfill-less Bundling Script
4-4 現代打包工具

Ch05 快取與網路機制 Caching & Networking
5-1 前端必備快取知識 (1)：HTTP Cache
5-2 前端必備快取知識 (2)：Service Workers Cache
5-3 前端必備快取知識 (3)：CDN
5-4 運用 Service Workers ─ Application Shell Architecture
5-5 使用 Stale While Revalidate 提供更好的使用者體驗
5-6 極限加速！升級 HTTP 版本