這是我第三年參加鐵人賽，每一次來到第 30 天，都有種如釋重負的感覺，不過同時也會感到一些遺憾，因為總是沒能把自己在開賽前預期的內容好好呈現出來。不論是主題內容還是文筆，都有能夠再加強的空間。

今年應該算是我最認真準備的一年，除了系列文的前面幾篇以外，剩下的篇章應該內容都還蠻足夠的，先來回顧一下這次系列文介紹了哪些主題：

Getting Ready: Planning And Metrics

Day1 : 系列文大綱
Day2 : 為什麼需要在前端做效能優化？
Day3 : Performance Analyzers Introduction
Day4 : Core Web Vital & RAIL Model

Assets Optimizations

Day5 : Code Minimize & Uglify
Day6 : 圖片最佳化
Day7 : Image Sprites

Delivery Optimizations & Render Process Optimizations

Day8 : 瀏覽器架構演進史 & 網頁渲染流程
Day9 : Resource Hints & Non-blocking script
Day10 : Virtualized List
Day11 : Lazy Loading
Day12 : Writing high performance CSS
Day13 : CSS GPU Acceleration

Build Optimizations

Day14 : Code Splitting & Dynamic Import
Day15 : Tree Shaking
Day16 : Polyfill-less Bundling Script && File Compression

Caching & Networking

Day17 : HTTP Caching
Day18 : Service Worker Caching
Day19 : Application Shell Architecture
Day20 : CDN
Day21 : Upgrading HTTP : From HTTP 1.1 to H2 or H3

Worker & WebAssembly

Day22 : Web Worker
Day23 : WebAssmebly

Framework, Architecture and Memory Management

Day24 : 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 : 系列文總結

自己認為有把身為前端開發者面對效能優化時一定要擁有的知識點都涵蓋進去了，除此之外，還另外加了一些沒有那麼「純前端」的主題，例如 Networking、WebAssembly...等等。但因為我認為現在的前端開發者越來越傾向也需要懂一些後端或架構面的知識，再加上我也將自己定義為雜食性的軟體工程師，因此這些沒那麼「純前端」的主題我覺得也非常值得學習。

在時間壓力下，總會產生一些遺珠

其實前端效能優化這個主題花 30 篇文章講解也是有點不夠的，雖然鐵人賽沒有規定只能發 30 篇文章，要發 40 篇 50 篇也是可以的，但我的準備期真的太長且太累的，所以還是先維持在 30 天吧 ?。有一些主題是我覺得沒有機會在這 30 天內被收錄進去有點可惜的遺珠，例如：

WebAssembly 的實作

在系列文當中，雖然有一天的主題是 WebAssembly，不過礙於篇幅與時間，只介紹了基本概念還有如何使用現成的 wasm module，而沒有講到如何實際寫一個 WebAssembly 的程式，當然這又是一個很複雜的 topic 了，我自己很期待 WebAssembly 的未來發展，所以閒暇之餘已經開始學習 Rust，未來也計畫要再撰寫一篇 Rust + WebAssembly 的文章，如果有興趣的朋友可以追蹤我的 Medium 喔！

實際的測試看看效能優化前後的差異

雖然系列文介紹了很多效能優化的技巧，但幾乎都是獨立的，學習完後如果不實際去實做看看，應該也不會知道到底能優化多少效能，又或者多個優化技巧一起使用會不會產生什麼意外的結果。

lazy-hackathon 是一個刻意弄的很慢的網站，是胡立大大為程式導師計畫做的一個練習效能優化的 project，可以到這個 repo 的 issue看看其他學生的優化過程與成果，我覺得蠻有趣的，社群上應該也可以找到類似故意拖垮效能的網站來讓各位練習。

太少關於 bundler 的 config 實作

其實有很多優化技巧都可以透過 bundler 來達成，這次系列文只簡單示範了一些 bundler 的操作，例如用 webpack 做 code splitting 與 minimize 等等，不過其實 bundler 還可以有更多複雜的操作，現在也越來越多功能與效能都比 webpack 還要好的 bundler，這系列中沒有太著重在這裡，算是一個小小的遺珠。

Demo 太過簡單，未必符合實際情境

雖然蠻多篇章都有附上 demo 的，不過這些 demo 都有點過於簡單，有可能會與真實開發時遇到的情境有一些脫節。因此才在第一天的時候強調可以多去參考效能優化的一些成功案例，畢竟為了練習而自己創造出來的效能瓶頸與實際狀況還是有差的。建議讀者可以針對在工作上或是 side project 等比較大型且複雜的專案去找找效能瓶頸並試著優化，經過這個過程才能真的內化在這個系列文中的各種技巧。

系列文的最後

其實還有太多太多的遺珠了，所以即便我很認真的完成了這次的鐵人賽，我也沒辦法很有自信的說前端效能優化大補帖這個主題名稱我當之無愧了。不過至少我達成了自己比鐵人賽的目標：「把想寫的東西用力得寫下來。」就是這麼簡單。雖然我也知道讀者可能沒辦法接受鐵人賽出現這麼長篇大論的文章，但我就是單純把想寫的東西記錄下來，並且趁著年輕的時候享受這份熱血！

當然還是要有點責任感，不能只管自己有沒有完賽，我同時也非常期望我的系列文能夠真的幫助到在螢幕前花時間閱讀的你，也謝謝你給了我 30 天的機會去傳達我想分享的東西。

最後的最後，給自己一點掌聲吧！你們撐過來了！

如果你喜歡我的系列文，可以多多分享，有任何的指教批評，也非常歡迎！

若有興趣，也可以追蹤我的 Medium 或是 Github

Medium: https://oldmo860617.medium.com/
Github: https://github.com/kylemocode

希望這次外送的 Web 前端效能優化大補帖還算好吃並飽足，我是 Kyle 老莫，我們下次見 ?