CSS 選擇器效能提公升

css 選擇器效能損耗來自?

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

#header > a

我們中的大多數人都是從左到右的閱讀習慣，會習慣性的設定瀏覽器也是從左到右的方式進行匹配規則，推測這條規則的開銷並不高。新建乙個前端學習qun438905713，在群裡大多數都是零基礎學習者，大家相互幫助，相互解答，並且還準備很多學習資料，歡迎零基礎的小夥伴來一起交流。

我們會假設瀏覽器以這樣的方式工作：尋找 id 為 header 的元素，然後將樣式規則應用到直系子元素中的 a 元素上。我們知道文件中只有乙個 id 為 header 的元素，並且它只有幾個 a 元素的子節點，所以這個css選擇器應該相當高效。

事實上，卻恰恰相反，css選擇器是從右到左進行規則匹配。了解這個機制後，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的 a 元素並且確定其父元素的 id 是否為 header 。

如果把例子的子選擇器改為後代選擇器則會開銷更多，在遍歷頁面中所有 a 元素後還需向其上級遍歷直到根節點。　　

#header a

瀏覽器匹配文件中所有的元素後分別向上逐級匹配 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

good

#bookmarkmenuitem