CSS選擇器性能分析

 

寫了幾篇關於js的博客，也是關於性能的，如今，我以爲有必要那css來認真分析一下了。以前只是看別人這麼寫就跟着寫，可是沒有去研究這樣寫或者是否是正確的寫法，性價比怎麼樣，渲染的效率好麼！這些都沒有考慮。 

那麼，如今，我提出css的一些選擇器的性能分析。

.wrapper ul li a{color:red;……}
.wrapper .list p.name{margin:10px 0;……}
* {margin:0;padding:0}
……

這樣寫完了之後，渲染的效果至少呈現出來了，但是，要想到     css選擇器從右向左的匹配規則    

此時，我就想研究一下瀏覽器在將DOM tree 變成 render tree 的時候css規則是如何匹配的？因而，就在網上找了一些資料：

• Why do browsers match CSS selectors from right to left?
• Writing Efficient CSS: Understand Your Selectors
• 編寫高效的 CSS

看了這麼多個人理解是從右往左匹配會首先過濾掉一大批不符合規則的樣式，從而使得效率更高。舉個例子

.wrapper .list a .demo{……}

若是從左往右匹配會先找到.wrapper,而後再找到裏面不少的.list,在往裏找直到找到那個.demo，查找的越深，過濾掉的也就越多，在這個查找的過程當中會有不少沒用的樣式也被遍歷過，這裏就致使匹配的效率很低。
若是從右向左匹配會首先過濾掉不是.demo的元素，在依次往上查找，越往上過濾掉的也就越少，這樣效率明顯比從左往右匹配要高不少
弄明白了從右向左匹配的規則那麼咱們要如何寫才能讓瀏覽器更快的匹配到呢？
瀏覽器在面對衆多的CSS樣式代碼時並非毫無規則的一個一個匹配，而是先將樣式規則分爲四個主要類別：

• ID 規則 這第一個類別包含了那些將 ID 選擇器做爲關鍵選擇器的規則。
• Class 規則 若是一個規則將一個 class 明確做爲它的關鍵選擇器，那麼它就屬於該類別。
• 標籤規則 若是一條規則將一個標籤做爲它的關鍵選擇器，那麼這條規則就屬於該類別。
• 通用規則 不屬於上面那些類別的規則都屬於這個類別。

並引入關鍵選擇器的概念(選擇器最後的那部分)

.wrapper ul li a{color:red;……}           /* 關鍵選擇器爲a */
.wrapper .list p.name{margin:10px 0;……}  /* 關鍵選擇器爲.name */

根據關鍵選擇器屬於哪類再在這一類中查找，從而達到更快匹配的目的。那麼問題來了，怎樣寫才能達到高效呢？
CSS選擇器效率從高到低的排序以下：

1. ID選擇器 好比#header
2. 類選擇器 好比.promo
3. 元素選擇器 好比 div
4. 兄弟選擇器 好比 h2 + p
5. 子選擇器 好比 li > ul
6. 後代選擇器 好比 ul a 7. 通用選擇器 好比 *
7. 屬性選擇器 好比 type = 「text」
8. 僞類/僞元素選擇器 好比 a:hover

以上引用自Steve Souders的Even Faster網站
在實際使用中咱們儘可能選擇高效一點的選擇器，可是有一點很難避免那就是組合選擇器的使用，通常都會用到。在使用組合選擇器時咱們須要注意一下幾點：

• 若是規則擁有ID選擇器做爲其關鍵選擇器，則不在須要添加其餘規則了，由於ID是惟一的。
  • 差 .wrapper button#backButton {…}
  • 好 #backButton {…}
• 不要用標籤名限定 class 規則，這會有損靈活性
  • 差 .wrapper p.name{…}
  • 好 .wrapper .name{…}
• 避免使用過分限制選擇器(最好不要超過3層)
  • 差 body .wrapper .content .list {}
  • 好 .content .list{}
• 避免後代選擇器,後代選擇器是 CSS 中性能耗用最大的選擇器。
  • 差 ul li a{}
  • 好 .list .list-content{}
• 依賴繼承

原本想寫幾個demo展現出不一樣選擇器的效率的，可是很差演示，你們能夠看看CSS selector performance
這篇文章中介紹了20中不一樣的選擇器的執行效率問題。

結合本身的實踐經歷，在編寫CSS規則時需注意如下幾點：

1. 嵌套層級最好不要超過3層
2. 避免使用標籤選擇器，儘量使用具體的類名
3. 不要給關鍵選擇器添加多餘的規則

CSS選擇器在性能提高上儘管相對於js等提高空間不大，但在大型項目中高效率的css選擇器的性能優點就能獲得展示