© 2025. All rights reserved.

加載效能檢測工具

05 Sep 2018

在檢測加載效能時，我們會使用一些工具做測量，而使用這些工具的目的是為了量化效能優劣狀況（來做比較），找出潛在問題並改善，例如：圖檔大小、HTTP Request 數量、程式碼是否最小化、壓縮、快取等。

效能調校圖片最佳化 Lighthouse 加載效能 Loading Performance

文字資源優化

05 Sep 2018

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

效能調校加載效能 Gzip Loading Performance 吃什麼

Debounce Input Handlers

03 Sep 2018

處理輸入的函式可能會造成效能問題，例如：阻礙幀（Frame）的繪製，導致畫面無法順利繪製；還有可能造成額外的版面配置（Recaculate Layout / Reflow）工作。

效能調校關鍵轉譯路徑 requestAnimationFrame 轉譯效能 Rendering Performance

響應式圖片（Responsive Images）

24 Aug 2018

在行動裝置上關於圖片常遇到圖檔體積過大或解析度不佳等問題，這些問題可經由選擇適當的圖片格式、壓縮、設定適合的尺寸、依照解析度提供適當的圖片來解決，本文要探討的是如何在 HTML 上使用 picture 與 img srcset sizes 來讓瀏覽器根據自身環境選擇適當的圖檔。

圖片最佳化效能調校加載效能 Image Optimization Loading Performance

如何做圖片壓縮？

22 Aug 2018

記錄圖片壓縮要做的事情、推薦圖片壓縮和效能檢測的工具。

圖片最佳化效能調校 Responsive Web Design 加載效能 Image Optimization

SVG Sprites

20 Aug 2018

小圖示的顯示和壓縮技術的演進從 .png、.jpg 或 .gif 圖檔、Image Sprites，到 Base64、Icon Fonts 再來到 SVG 與 SVG Sprites，來看看到底 SVG Sprites 哪裡好 (✪ω✪) 本文前半段著重在產生 SVG Sprites 的方法和如何使用 SVG Symbols 定位；後半段說明各種 SVG Icon 的使用方式和優缺比較。

SVG 圖片最佳化效能調校加載效能 Image Optimization

CSS Modules：babel-plugin-react-css-modules 小記

14 Aug 2018

樣式管理一直是前端工程師的痛點（很煩 (╯‵□′)╯︵┴─┴），因此 CSS 的模組化方法從過去的 OOCSS、SMACSS，到近代的 BEM，還有最近的 CSS Modules 與 CSS in JS，企圖讓程式碼簡潔易懂、可重用，進而有效率地開發和維護。這裡記錄我的玩具「吃什麼，どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。

CSS Modules CSS in JS styled-components babel react.js

≪較新文章較舊文章≫