前端面試題-CSS選擇器性能優化

1、CSS選擇符

CSS選擇符由一些初始化參數組成,這些參數指明瞭要應用這個CSS規則的頁面元素。

做爲一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CSS選擇符模式,儘可能編寫高效的CSS選擇符,從而加快頁面的渲染速度,縮短頁面呈現時間。css

2、瀏覽器讀取選擇器

瀏覽器讀取選擇器,遵循的原則是從選擇器的 右邊到左邊讀取。換句話說,瀏覽器讀取選擇器的順序是由右到左進行的。

2.1 舉例

選擇器

瀏覽器讀取選擇器的順序以下:前端

  1. 查找頁面中全部 class=red 的 span 元素
  2. 查找 1. 結果的父元素中是否有 p 元素
  3. 查找 2. 結果的父元素中是否有 id=box 的 div 元素

2.2 從右到左的用處

  • 儘早的過濾掉無關的樣式規則
  • 儘快的匹配到目標元素

2.3 關鍵選擇器

選擇器的最後一部分,也就是選擇器的最右邊部分被稱爲 關鍵選擇器 (keyselector),它將決定 CSS 選擇器的效率。面試

3、選擇器的效率

3.1 從高到低

內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 元素(類型)選擇器 = 僞元素選擇器正則表達式

3.2 總結

ID和類名用於關鍵選擇器上效率是最高的,而CSS3的仿僞類和屬性選擇器,雖然使用方便,但其效率倒是最低的segmentfault

4、選擇器性能優化

根據以上「瀏覽器讀取選擇器」與「選擇器的效率」原則,咱們能夠經過避免不恰當的使用,提高 CSS 選擇器的性能。數組

4.1 避免使用通用選擇器

選擇器性能優化

瀏覽器匹配文檔中全部的元素後分別向上逐級匹配 class 爲 content 的元素,直到文檔的根節點。所以其匹配開銷是很是大的,因此應避免使用關鍵選擇器是通配選擇器的狀況。瀏覽器

4.2 不要在編寫id規則時用標籤名或類名

選擇器性能優化

4.3 不要在編寫class規則時用標籤名

選擇器性能優化

4.4 把多層標籤選擇規則用class規則替換,減小css查找

選擇器性能優化

4.5 避免使用子選擇器

後代選擇器在CSS中是最昂貴的選擇器。貴得要命——尤爲是把它和標籤或通配符放在一塊兒!性能優化

選擇器性能優化

標籤後面最好永遠不要再增長子選擇器性能

選擇器性能優化

4.6 依靠繼承

選擇器性能優化

4.7 避免單規則的屬性選擇器

屬性選擇器根據元素的屬性是否存在或其屬性值進行匹配,以下例規則會把herf屬性值等於 」#index」 的連接元素設置爲紅色:優化

選擇器性能優化

但其匹配開銷是很是大的,瀏覽器先匹配全部的元素,檢查其是否有href屬性而且herf屬性值等於」#index」, 而後分別向上逐級匹配class爲selected的元素,直到文檔的根節點。因此應避免使用關鍵選擇器是單規則屬性選擇器的規則。

4.8 避免類正則的屬性選擇器

CSS3添加了複雜的屬性選擇器,能夠經過類正則表達式的方式對元素的屬性值進行匹配。固然這些類型的選擇器定是會影響性能的,正則表達式匹配會比基於類別的匹配會慢不少。大部分狀況下咱們應儘可能避免使用 *=, |=, ^=, $=, 和 ~=語法的屬性選擇器。

4.9 移除無匹配的樣式

移除無匹配的樣式,有兩個好處:

  • 第一,刪除無用的樣式後能夠縮減樣式文件的體積,加快資源下載速度;
  • 第二,對於瀏覽器而言,全部的樣式規則的都會被解析後索引發來,即便是當前頁面無匹配的規則。移除無匹配的規則,減小索引項,加快瀏覽器查找速度;

5、總結

  1. 網站編寫CSS時,應該優先考慮使用class選擇器,避免使用通配符選擇器(*)和屬性選擇器(a[rel=」external」]),後代選擇器與標籤選擇器結合使用也應避免。
  2. 使用id選擇器的性能最好,可是編寫時要注意其惟一性,謹慎使用。
  3. CSS3選擇器(例如::nth-child(n)第n個孩子)在幫助咱們鎖定咱們想要的元素的同時保持標記的乾淨和語義化,但事實是,這些花哨的選擇器讓更多的瀏覽器資源被密集使用。若是你關心頁面性能的話,他們真不應被使用!

擴展閱讀
前端面試題-CSS選擇器
前端面試題-CSS優先級

相關文章
相關標籤/搜索