鐵人檔案
之前在 Medium 寫了一篇「今晚，我想來點 Web 前端效能優化大補帖！」(https://reurl.cc/rgjg5O)
不過因為是屬於重點整理性質的文章，我沒有針對每個知識點做太多深入的解說，因此寫完後還是覺得自己遺漏了很多細節，礙於篇幅很多技術也沒有收錄進去。
經過思考後我認為鐵人賽是一個彌補自己遺憾的好機會！我預計把該篇文章的各個效能優化技術拉出來詳細介紹，某些主題更會搭配 Demo Code 讓讀者更容易吸收，也會加入更多我認為十分值得介紹之前卻沒有收錄到文章的優化技術，希望這次真的可以扛得起「Web 前端效能優化大補帖」這個主題名稱！
還記得昨天 Virtualized List 篇章開頭放的 Facebook demo 影片嗎？有沒有發現我們好像遺漏了什麼功能沒有說明？ 先問大家一個問題...
CSS 是前端開發者不可不學的技術之一，沒有了它就好像你做出來的網頁都沒有穿衣服一樣，有點羞於見人呀！? 但你有想過 CSS 如果亂寫也可能會影響到網頁的效能...
其實今天的主題應該算是昨天 High Performance CSS 的延伸。 大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧？是不是覺得很煩人呢？就算...
Code Splitting 是一個非常重要的觀念，現代網頁程式漸漸走向使用框架以模組化方式來開發，通常會透過如 webpack 等 bundler 來 ug...
在昨天我們學會了 code splitting 與 dynamic import 的技巧，讓程式在打包時可以形成好幾個 bundle chunks，並在真的需...
今天是 Build Optimizations 主題的最後一篇了，到目前為止我們已經認識了 Code Splitting, Dynamic Import 還有...
今天即將進入 Caching & Networking 章節的第一天，快取，是一個非常重要的技術，不論是前端還是後端，甚至是再更底層的系統開發，都ㄧ定...
如果你聽過 PWA，那麼對今天的主題ㄧ定不陌生，因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...
昨天介紹 Service Workers 後我們知道它是 PWA 的要素之一，且也是讓 Web App 實現離線瀏覽的關鍵技術。今天我們將延伸昨天的知識，介紹...
CDN 這個名詞在前面的篇章應該出現過蠻多次的，一直感到困惑的朋友們不用擔心，今天終於要來好好介紹它了！ 什麼是 CDN ? CDN 的全名為 Conten...