CSS選擇符由一些初始化參數組成,這些參數指明瞭要應用這個CSS規則的頁面元素。
做爲一個網站的前端開發工程師,應該避免編寫一些常見的開銷很大的CSS選擇符模式,儘可能編寫高效的CSS選擇符,從而加快頁面的渲染速度,縮短頁面呈現時間。css
瀏覽器讀取選擇器,遵循的原則是從選擇器的 右邊到左邊讀取。換句話說,瀏覽器讀取選擇器的順序是由右到左進行的。
瀏覽器讀取選擇器的順序以下:前端
選擇器的最後一部分,也就是選擇器的最右邊部分被稱爲 關鍵選擇器 (keyselector),它將決定 CSS 選擇器的效率。面試
內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 元素(類型)選擇器 = 僞元素選擇器正則表達式
ID和類名用於關鍵選擇器上效率是最高的,而CSS3的仿僞類和屬性選擇器,雖然使用方便,但其效率倒是最低的。segmentfault
根據以上「瀏覽器讀取選擇器」與「選擇器的效率」原則,咱們能夠經過避免不恰當的使用,提高 CSS 選擇器的性能。數組
瀏覽器匹配文檔中全部的元素後分別向上逐級匹配 class 爲 content 的元素,直到文檔的根節點。所以其匹配開銷是很是大的,因此應避免使用關鍵選擇器是通配選擇器的狀況。瀏覽器
後代選擇器在CSS中是最昂貴的選擇器。貴得要命——尤爲是把它和標籤或通配符放在一塊兒!性能優化
標籤後面最好永遠不要再增長子選擇器性能
屬性選擇器根據元素的屬性是否存在或其屬性值進行匹配,以下例規則會把herf屬性值等於 」#index」 的連接元素設置爲紅色:優化
但其匹配開銷是很是大的,瀏覽器先匹配全部的元素,檢查其是否有href屬性而且herf屬性值等於」#index」, 而後分別向上逐級匹配class爲selected的元素,直到文檔的根節點。因此應避免使用關鍵選擇器是單規則屬性選擇器的規則。
CSS3添加了複雜的屬性選擇器,能夠經過類正則表達式的方式對元素的屬性值進行匹配。固然這些類型的選擇器定是會影響性能的,正則表達式匹配會比基於類別的匹配會慢不少。大部分狀況下咱們應儘可能避免使用 *=, |=, ^=, $=, 和 ~=語法的屬性選擇器。
移除無匹配的樣式,有兩個好處: