CSS 優化補充

主要分成三大部分

載入方式優化

Critical Css:

• 以餐廳網站為例，希望使用者最先看到或是重要資訊是 nav bar，所以把 nav bar 相關的 css 貼到 html，讓 html 優先渲染，不需要等待讀取 css 檔。

Css Sprite:

• 把一堆小圖片包成一張大圖片傳去 Server，再從大圖片取得小圖片，例如用 Css 調整位置來選取要用的圖。

Cache(後端處理):

• 用快取存圖片，不是第一次造訪網站的人就可以利用快取來讀取圖片而不用重新載入。

執行方式的效能優化

目標：讓瀏覽器方便解析 Css，節省時間與效能

• 降低選擇器的複雜性：
  ```css=
  .title {
  /style/
  }

.box:nth-last-child(-n+1) .title {
/style/
}
```

• 屬性渲染：
  注意特定的屬性，從不同階段來渲染 Css 會有不同的效能影響，例如動畫特效等等

節省 Css 資源大小

Minify:

• 把檔案變小，例如刪掉空格空行，因為瀏覽器不需要也可以讀懂。

壓縮(後端處理)：

• 將 css 重新編碼，瀏覽器要讀懂的話還要解碼，但效率比 minify 好。

通常兩個都會用

tags: Week13