CSS 效能優化


Posted by Christy on 2021-09-16

[ MTR05 ]_第十三週(07/05 ~ 07/11):現代前端工具_CSS 優化 Part1 by minw

優化可以分成以下三種:

資源本身大小

minify

gzip:主要是後端

資源載入方式

  1. CSS Sprites

  2. Critical CSS

  3. Cache:後端

資源執行方式

選擇器

屬性渲染


Part2

Critical CSS

什麼情況下會載入慢?東西大

解法 1 可以分批載入,用 Critical CSS 把重要的先傳過去,剩下的慢慢傳

解法 2 小東西包成大東西,一起傳:例如 icon、小圖等等

Cache:東西傳過來以後,暫存在瀏覽器上。(偏後端)


part4

minify 或壓縮:

例如空格只是為了易讀,可以移除。










Related Posts

DAY39:Smallest possible sum

DAY39:Smallest possible sum

有空的話來學一下 Tailwind CSS - Week 4

有空的話來學一下 Tailwind CSS - Week 4

一起來讀論文 - Robot Learning via Human Adversarial Games

一起來讀論文 - Robot Learning via Human Adversarial Games


Comments