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

css選擇符由一些初始化引數組成，這些引數指明了要應用這個css規則的頁面元素。

作為乙個**的前端開發工程師，應該避免編寫一些常見的開銷很大的css選擇符模式，盡量編寫高效的css選擇符，從而加快頁面的渲染速度，縮短頁面呈現時間。

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

瀏覽器讀取選擇器的順序如下:

查詢頁面中所有 class=red 的 span 元素

查詢 1. 結果的父元素中是否有 p 元素

查詢 2. 結果的父元素中是否有 id=box 的 div 元素

選擇器的最後一部分，也就是選擇器的最右邊部分被稱為關鍵選擇器（keyselector），它將決定 css 選擇器的效率。

內聯樣式 > id 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 元素（型別）選擇器 = 偽元素選擇器

id和類名用於關鍵選擇器上效率是最高的，而css3的仿偽類和屬性選擇器，雖然使用方便，但其效率卻是最低的。

根據以上「瀏覽器讀取選擇器」與「選擇器的效率」原則，我們可以通過避免不恰當的使用，提公升 css 選擇器的效能。

瀏覽器匹配文件中所有的元素後分別向上逐級匹配 class 為 content 的元素，直到文件的根節點。因此其匹配開銷是非常大的，所以應避免使用關鍵選擇器是通配選擇器的情況。

後代選擇器在css中是最昂貴的選擇器。貴得要命——尤其是把它和標籤或萬用字元放在一起！

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

但其匹配開銷是非常大的，瀏覽器先匹配所有的元素，檢查其是否有href屬性並且herf屬性值等於」#index」，然後分別向上逐級匹配class為selected的元素，直到文件的根節點。所以應避免使用關鍵選擇器是單規則屬性選擇器的規則。

css3新增了複雜的屬性選擇器，可以通過類正規表示式的方式對元素的屬性值進行匹配。當然這些型別的選擇器定是會影響效能的，正規表示式匹配會比基於類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=， |=， ^=， $=，和 ~=語法的屬性選擇器。

移除無匹配的樣式，有兩個好處：

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

**編寫css時，應該優先考慮使用class選擇器，避免使用萬用字元選擇器（*）和屬性選擇器（a[rel=」external」]），後代選擇器與標籤選擇器結合使用也應避免。

使用id選擇器的效能最好，但是編寫時要注意其唯一性，謹慎使用。

css3選擇器（例如：:nth-child(n)第n個孩子）在幫助我們鎖定我們想要的元素的同時保持標記的乾淨和語義化，但事實是，這些花哨的選擇器讓更多的瀏覽器資源被密集使用。如果你關心頁面效能的話，他們真不該被使用！

擴充套件閱讀

前端面試題-css選擇器

前端面試題-css優先順序