CSS選擇器性能

CSS選擇器損耗到底來自哪裏呢？

CSS選擇器對性能的影響源於瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優化選擇器的原則是應儘量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解CSS選擇器匹配的機制， 如子選擇器規則：

#header > a{font-weight:blod;}

CSS選擇器是從右到左進行規則匹配，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的 a 元素並且確定其父元素的 id 是否爲 header 。

那麼，如何減少 CSS 選擇器性能損耗？

一般認爲，CSS選擇器的執行效率從高到低如下：

/*1.id選擇器（#myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.通配符選擇器（*）
8.屬性選擇器（a[rel="external"]）
9.僞類選擇器（a:hover, li:nth-child）*/

根據以上「選擇器匹配」與「選擇器執行效率」原則，我們可以通過避免不恰當的使用，提升 CSS 選擇器性能。
1、避免使用通用選擇器

.content * {color: red;}

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

/*BAD*/
button #backButton {…}
/*BAD*/
.menu-left #newMenuIcon {…}
/*GOOD*/
#backButton {…}
/*GOOD*/
#newMenuIcon {…}

3、避免使用標籤限制 class 選擇器\

/*BAD*/
treecell.indented {…}
/*GOOD*/
.treecell-indented {…}
/*BEST*/
.hierarchy-deep {…}

4、避免使用多層標籤選擇器。使用 class 選擇器替換，減少css查找

/*BAD*/
treeitem[mailfolder="true"] > treerow > treecell {…}
/*GOOD*/
.treecell-mailfolder {…}

5、避免使用子選擇器

/*BAD*/
treehead treerow treecell {…}
BETTER, BUT STILL BAD 
treehead > treerow > treecell {…}
/*GOOD*/
.treecell-header {…}

6、使用繼承

/*BAD*/
#bookmarkMenuItem > .menu-left{ list-style-image:url(blah) }
/*GOOD*/
#bookmarkMenuItem { list-style-image: url(blah) }

作爲一名前端開發人員，必須具有「提升 CSS 選擇器性能」的意識，但實際應用中，是否需要完全貫徹這些原則呢？這是一個探索「追求高性能」與「可維護性」兩者平衡的問題,具體應該怎麼做要視情況而定。