大家好，我是 Kyle，大家也可以叫我老莫，這次是連續第三年參加 iT 邦幫忙鐵人賽了，每次都說太累了明年絕對不比了，結果活動頁一出來還是覺得很熱血就又報名了? 關於參賽主題，我思考了蠻久的，原本想要試著寫寫看最近在學的 Rust + WebAssembly，不過後來想想覺得準備時間好像不太夠，直接挑戰沒那麼熟悉的主題應該會死蠻慘的，於是還是把目標轉回了比較熟悉的前端開發。
之前在 Medium 寫了一篇 「今晚，我想來點 Web 前端效能優化大補帖！」是我目前篇幅最長的一篇文章，不過因為是屬於重點整理性質，因此寫完後還是覺得自己遺漏了很多細節與技術。經過思考後我認為這是蠻適合鐵人賽的一個系列主題，我將把該篇文章的各個效能優化元件拉出來分析，並且更詳細深入得介紹該項概念與技術，也會加入一些在撰寫該篇文章後我才學習到的效能優化技術，希望這次真的可以扛得起「Web 前端效能優化大補帖」的主題名稱！
在介紹系列文大綱以前，先來談談主題。
效能是工程師在維護專案時非常重視的要點，不論是 Web 還是 App，甚至是需要大量運算資源的機器學習，都會想追求極致的效能，用高效率換取高價值。不過首先在文章的最開頭想給讀者灌輸一個 mindset：「就 Web Client Side 而言，並不是所有的應用都需要追求效能，有時候獲取效能的背後也許需要花上昂貴的成本，比較起來是得不償失的，因此在進行效能調校前應該先好好衡量進行優化的成本，時間、困難度都需要考慮，有時候先求有再求好反而是較佳的方案。另外一件事就是效能優化沒有所謂的終點，這是一段追求「快還要更快」的過程。」
提到 web 應用的效能優化，很多人第一時間會映入腦海裡的可能會是例如 Load Balancing 或是 Server Caching 等分流或減少網路請求的方式，然而這些針對 Server Side 的效能優化並不是本篇文章的重點，本篇文章將盡量詳細介紹各種 Web Client Side 的效能優化的技巧，會以理論與概念為主，闡述各技巧的原理與解決的問題，但是有些用程式碼比較好理解的技巧就會附上 Code Sample，並且會在每一天的文章中附上進階閱讀的連結讓想更深入了解該技術的讀者能夠有參考的方向。
我知道前端效能優化是很深很深的主題，儘管花了 30 天的篇幅我也沒辦法把所有知識點都涵蓋進去，但我希望我能夠 cover 到一般來說最普遍、重要，同時也是我認為前端開發者一定要知道的效能優化知識。對這個主題有興趣的讀者記得訂閱這個系列文，這 30 個夜晚，我們都將一起來點效能優化大補帖。（註：本來以為這個廣告詞已經有點退流行了，感謝小戴又讓這個廣告重新紅起來 ?）
既然是 Day 1，不免俗得要來介紹一下系列文的大綱，不囉唆，直接看大綱：
Getting Ready: Planning And MetricsDay1 : 系列文大綱
Day2 : 為什麼需要在前端做效能優化？
Day3 : Performance Analyzers Introduction
Day4 : Core Web Vital & RAIL Model
Assets OptimizationsDay5 : Code Minimize & Uglify
Day6 : 圖片最佳化
Day7 : Image Sprites
Delivery Optimizations & Render Process OptimizationsDay8 : 瀏覽器架構演進史 & 網頁渲染流程
Day9 : Resource Hints & Non-blocking script
Day10 : Virtualized List
Day11 : Lazy Loading
Day12 : Writing high performance CSS
Day13 : CSS GPU Acceleration
Build OptimizationsDay14 : Code Splitting & Dynamic Import
Day15 : Tree Shaking
Day16 : Polyfill-less Bundling Script && File Compression
Caching & NetworkingDay17 : HTTP Caching
Day18 : Service Worker Caching
Day19 : Application Shell Architecture
Day20 : CDN
Day21 : Upgrading HTTP : From HTTP 1.1 to H2 or H3
Worker & WebAssemblyDay22 : Web Worker
Day23 : WebAssmebly
Framework, Architecture and Memory ManagementDay24 : Web Rendering Architectures
Day25 : ESR: Rendering On The Edge
Day26 : Memory Management In JavaScript
Day27 : Stale While Revalidate
Day28 : Browser Devtool Performance Tab Introduction
Day29 : 面對高流量，前端可以做些什麼？
Day30 : 系列文總結
我將 30 天的內容分為幾個主題章節，在系列文的一開始會談到「為什麼我們需要在前端做效能優化？」與「該用什麼指標與工具來評估應用的效能？」，畢竟在執行一件任務前搞清楚目的與方向是最重要的。
接下來的 Assets Optimizations 章節則是介紹如最小化與圖片最佳化等靜態資源的優化。
Delivery Optimizations & Render Process 章節則會先帶大家認識瀏覽器的渲染流程，以及介紹一些透過程式碼可以做到的優化。
現代的網頁應用免不了會透過 module bundler 如 webpack 來打包程式碼，Build Optimizations 這個章節我們會來看看在這個過程有沒有可以優化的地方。
再來則會介紹和網路與應用架構相關的優化方式，最後再聊聊前端框架 React 背後是怎麼實作效能優化，透過解析成熟的框架來提升我們自身的技巧與思維。系列文最後的最後將會談到面對高併發的流量，身為前端，我們可以做些什麼？要應對這個問題將會使用到系列文介紹到的許多效能優化技術，希望到這天時讀者會有「啊！原來經過這 30 天的旅程我已經學會這麼多，也能夠做這麼多優化了！」的喜悅感。
在主題的架構上我也盡量做到獨立拆分，每一天都是一個獨立的主題。如果看過大綱後只對特定技術有興趣的讀者應該可以放心直接觀看有興趣的主題。（當然如果你能從頭支持到結束，我一定會十分感激的 ?）
希望這樣的內容大綱在安排上是合理的，我也會盡量用心的完成每一篇文章、每一個知識點，如果有任何問題或錯誤內容甚至寫作上的建議都歡迎讀者留言，我會盡快回覆與修正。準備好的讀者接下來的這一個月就多多指教囉！
第一天也免不了要自我介紹一下，我是一名雜食性菜鳥軟體工程師，雖然主要 focus 在前端開發，但有興趣的技術例如後端、DevOps、雲端技術等都有接觸。
Github
Medium
Writer of StarBugs Weekly
BESG Web Sharing Group
前兩年鐵人賽系列文傳送門：
iThome鐵人賽
看影片追技術