前端css效能優化

1. 避免使用@important

外部的css檔案中使用@important會使得頁面在載入時增加額外的延遲。最好使用link

 

2. 避免使用css表示式（表示式可能會造成極大的計算量）

 

3. 避免通配選擇器

在初期使用*{margin:0;padding:0},以此來消除標籤的預設佈局和不同瀏覽器的對同一個標籤的不同的渲染。

同時 #app a比#app>a渲染消耗的時間多些

 

4. 移除無匹配的樣式

a. 刪除無用的樣式後可以縮減樣式檔案的體積，加快資源的下載速度

b. 對於瀏覽器而言，所有的樣式規則都會被解析後索引起來，即使當前頁面無匹配的規則時。移除無匹配的規則，減少索引項，加快瀏覽器的查詢速度

 

5. 避免單規則的屬性選擇器

瀏覽器匹配所有的元素—>檢查是否有href屬性並且href=`#index`—->分別逐級向上匹配class為selected的元素，直到文件的根節點

 

6. 避免類正則的屬性選擇器

正規表示式匹配會比基於類別的匹配會慢很多。大部分情況下我們應儘量避免使用*=,|=,^=,$=,合~=語法的屬性選擇器

 

本文摘抄自：https://www.cnblogs.com/CloverH/p/5033475.html