系列文章
[30 天學會 Web 前端效能優化] 21. 什麼是 Critical rendering path ？
從第一篇講到現在，相信各位對於瀏覽器的運作有更深的認識了吧？前面之所以講這麼多瀏覽器的運作原理，就是在為了這一篇文章鋪路。 什麼是 Critical rende...
[30 天學會 Web 前端效能優化] 22. 透過專案複習前面的知識1 - doc.write 的可怕
事實上 Web Performance 是非常大的議題，因此我並不期盼在這三十天當中將所有東西都講完，而是希望能夠讓讀者扎實地掌握基本的概念、知識。我會在最後一...
[30 天學會 Web 前端效能優化] 23. 透過專案複習前面的知識2 - 監測 jank
前面講到 Paint 時有提到 jank ，說了很多理論，沒有看到還是很難感受一下是什麼感覺。請大家再次訪問我們的測試專案。 接著請點擊「啟動瘋狂模式」的按鈕，...
[30 天學會 Web 前端效能優化] 24. 透過專案複習前面的知識3 - 合併 JS
現在我們已經針對測試專案做了移除 document.write 的優化了，然而現在還有一個問題：Javascript 會阻擋 DOM 的建構。 麻煩的地方在於，...
[30 天學會 Web 前端效能優化] 25. 透過專案複習前面的知識4 - compress JS & CSS
我們在「什麼是 Critical rendering path ？」那一篇提到基本上大部份的優化 Tips 都是環繞在「降低 Critical Path Len...
[30 天學會 Web 前端效能優化] 26. 透過專案複習前面的知識5 - 還有什麼是我們可以優化的嗎？
經過前面幾篇的優化後，這是我們的成品：https://81ea55eb1460e512c8faef7f6ed1f2403cd62635-www.googledr...
[30 天學會 Web 前端效能優化] 27. Navigation Timing API
透過前面的練習專案，我們學了不少東西，最後這幾篇文章，我打算介紹幾個效能監測工具，這一系列文章即將進入尾聲囉！ Navigation Timing API 是一...
[30 天學會 Web 前端效能優化] 28. YSlow
YSlow 是 Yahoo 開發的瀏覽器 Plugin ，為監測網頁效能必裝的工具之一。之前的文章，我們有介紹到 Google 的 PageSpeed Insi...
[30 天學會 Web 前端效能優化] 29. WebPagetest
除了前面兩篇介紹的工具之外，這一篇文章要介紹的工具你「絕對」不能錯過，因為它的功能太強大了。 今天要介紹的就是這個網站： WebPagetest 今天一樣拿我的...
[30 天學會 Web 前端效能優化] 30. 結語、延伸學習資源
沒想到已經到了第三十天了，這種將一件事做到底的感覺真的很不錯。原本我希望能夠寫更多內容的，只是礙於當初定題目時是以 Frontend Performance 為...