© 2024. All rights reserved.

Gzip

在瀏覽器輸入網址並送出後，到底發生了什麼事？

這道題目涵蓋前端技術範圍很廣，很適合在各階段拿來梳理並檢視自己的技能和狀態。那麼，就讓我來檢視一下自己的狀態吧 d(`･∀･)b

November 26, 2018 效能調校關鍵轉譯路徑圖片最佳化轉譯效能你懂JavaScript嗎？你所不知道的JS 加載效能快取 Rendering Performance Critical Rendering Path Resource Hints Web Workers Worker requestAnimationFrame Gzip HTTP Caching Loading Performance You-Dont-Know-JS cache javascript javascript prototype undefined 編碼解碼 encode decode base-64 前端效能系列文 · 留言

加載效能檢測工具-試用 Google PageSpeed Insights、WebPageTest、Pingdom 和 Lighthouse 的測試範例

針對網站進行各種工具的測試並做優化。

September 11, 2018 效能調校加載效能 Lighthouse Loading Performance 吃什麼 Gzip 前端效能系列文 · 留言

文字資源優化

文字資源（Text Content）的優化，以下列出加快從伺服器下載的有效方法。

September 5, 2018 效能調校加載效能 Gzip Loading Performance 吃什麼前端效能系列文 · 留言

圖片最佳化（Image Optimization）

實作「圖片最佳化（Image Optimization）」的第一個問題是「真的需要這個圖檔嗎？」，去除不需要的圖檔即可減少 HTTP Request。第二個問題才是「若圖檔不能去除或被取代，可以做哪些優化？」。

July 30, 2018 圖片最佳化效能調校加載效能 SVG Resource Hints Lighthouse Base64 Images Image Optimization Loading Performance Gzip 編碼解碼 encode decode base-64 前端效能系列文 · 留言

Base64 Images

將圖片轉為編碼字串，讓開發者能將圖檔嵌入 HTML、CSS 或 JavaScript 程式碼，以減少 HTTP Request。適合較少更新的小圖，例如 icon 等。

July 26, 2018 Base64 Images 效能調校加載效能 Loading Performance 圖片最佳化 Image Optimization base-64 Gzip 編碼解碼 encode decode 前端效能系列文 · 留言