[week 13] 前端進階 - 如何優化執行 CSS 效能

前端優化

關於前端優化方式，可從下列幾個方向進行：

• 資源本身的大小
• 資源載入的方式
• 資源執行的方式

  CSS 優化

節省資源大小

• Minify：省略空白字元，電腦可直接辨識
  • 例如：nps sass --style=compressed main.sass masin.css
• gzip*：壓縮，會進行編碼，通常是在 server 端進行，電腦會經過解碼後再使用

通常會先進行 Minify 再進行 gzip*，藉此壓縮資源大小。

載入方式

• Critical CSS：分批載入，先載入重要的部分
  • 例如：把 navbar、banner 樣式放到 index.html，在讀取 css 之前即可先被載入

• CSS Sprites：將每個小檔案打包後，只需發出一個 Request ，載入完成後再拆開引用
  • 例如：將小圖片打包成大圖片，再取用需要的區塊

• Cache*：將資料暫存在瀏覽器，只有第一次登入網站需下載，之後就能快速讀取暫存檔

執行方式

• 選擇器：降低選擇器的複雜性

  • 例如：使用 Sass 巢狀語法時，需考慮到編譯後程式碼的複雜性

• 屬性渲染：需考慮到屬性載入的順序

  • 例如：特效網頁或有 SEO 考量的網站，需注意動畫或特效會在哪個階段匯入

---

CSS Sprites 與 Data URI 的優缺點

CSS Sprites

CSS Sprite 是將頁面中所使用到的小圖片整合到一張大圖上。也就是說，在加載一個包含多個圖片的頁面上時，只需使用一個HTTP請求而不需要 JavaScript 代碼。

• 優點：減少 http 請求
• 缺點：圖片合併定位費時費力

使用技巧

• 切圖前就需構思拼接好圖片
• 排序有序，便於後期維護。有利於 background-position 定位
• 定位時避免使用 right, bottom 等
• 合理預留空白位置（空太多檔案變大，太小引起圖示重疊）

Data URI

image data URI 是將圖片資源轉換為 base64 字串格式嵌到頁面或樣式中。不需要圖片的請求連結。

• 優點：
  • 減少 HTTP 請求
  • 避免某些檔案跨域
  • 無圖片快取等問題
• 缺點：
  • 相容性（IE6,7 不相容，可使用 MHTML 來解決）
  • 瀏覽器不會快取該圖片
  • 增加 css 檔案大小
  • 編碼成本及維護

使用技巧

• data URI 可使用在：
  • 圖片尺寸很小，使用一條 http 請求有點浪費，如：漸變背景框
  • 圖片在全站大規模使用，且很少被更新的，如：loading 圖
• 標籤語法
  • data：取得資料協議
  • image/png：取得資料的協議名稱（注意這裡也圖片資源也可以使用字型等）
  • base64：資料編碼方式
  • iVBOR…：編碼後資料

參考資料：

• 主流CSS image比較
• CSS Sprites vs. Data URIs:在移动端，谁更快？