[轉]關於瀏覽器css選擇器性能優化

　　做爲一個前端開發， 我以爲頗有必要了解瀏覽器對css選擇器的解析，由於這個關係到頁面的渲染，高效的方式、避開開銷大的方式這些無疑爲網站加載縮短了時間。
　　最近在新的項目中陷入了一個誤區，也是出於對jquery使用的瞭解，因而把jquery中選擇器的優化放到了寫css上面，可是發現其實這二者是不同的，瀏覽器解析css是自己默認的規則，而jquery是模擬出來的規則爲了用戶更好的使用。後面去查找這方面的資料，因而發現本身的錯誤是那麼的好笑。
找到了阿里前端的一篇文章http://www.aliued.cn/2013/01/24/網站css選擇器性能討論.html ，固然也找了其餘的一些文章，不過都有說到了safari和webkit的架構師David Hyatt的兩段話：

　　樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出。
　　若是你很是在乎頁面的性能那千萬別使用CSS3選擇器。實際上，在全部瀏覽器中，用 class 和 id 來渲染，比那些使用同胞，後代選擇器，子選擇器（sibling, descendant and child selectors）對頁面性能的改善更值得關注。

　　由於我項目的緣由，css3仍是沒有支持的，因此用不上css3的選擇器。
　　網上的資料也說到了Google 資深web開發工程師Steve Souders對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）

　　我以爲這些應該是這方面比較權威的資料了，那麼就分析一下使用過程該注意的問題，特別是跟我同樣都是jquery的熱愛者，真的是要特別注意一下，下面說一下我理解的一些例子（結合jquery分析）：
　　1.id選擇器確定是最快，可是不要在ID選擇器使用的同時再使用標籤或類選擇器了，這點上jquery也是同樣的。
不要出現這樣的寫法 "div#content" 或者 "#content.text"。David Hyatt的第一段話中有說到了，樣式系統從最右邊的選擇符開始向左進行匹配規則。只要當前選擇符的左邊還有其餘選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者由於不匹配而退出。，而​在html中ID是惟一的，若是真的是用了 "div#content"，瀏覽器經過ID定位到了具體的元素，而後發現左側仍是標籤選擇器，那麼就會繼續匹配，繼續查找元素，這樣無疑損耗了瀏覽器的性能，影響了渲染時間。

　　2.​不要在類選擇器時用標籤選擇器，這點跟jquery是恰好相反的。
不要出現這樣的寫法 "div.text"，從css的效率來看，類選擇器（class）是比標籤選擇器要好，這樣的寫法只會增長了查找的難度，若是真的是根據標籤來區分樣式的話，考慮寫不一樣的class。

　　3.​​若是明確dom結構，先使用子選擇器，減小後代選擇器使用，這點跟jquery的對比沒有留意和實踐，本人認爲是相反的。
若是你的寫法是這樣 "div a"，而實際上div 跟 a 是父子關係，若是合適更建議是這麼用 "div>a"，這樣效率高一些，可是不是最好的方案，下面這一點的方案會更好一些。

　　4. ​ ​使用類選擇器替代後代選擇器和子選擇器，這點上跟jquery是不同的。
若是你的寫法是這樣 "div a" "div>a"，雖然前面建議用子選擇器替換後代選擇器，可是這兩個的方式仍是效率低，David Hyatt的第3段話：後代選擇器在CSS中是最昂貴的選擇器。貴得要命——尤爲是把它和標籤或通配符放在一塊兒！​ ​毫無疑問，咱們要想其餘的方式來替換這種書寫方式，那麼能夠考慮這樣的寫法：div對應的爲".div-text" a對應的爲".div-text-a"，從命名上來關聯二者，在查看的時候邏輯也會清晰不少。
​
　　5. ​儘可能使用繼承來避免寫重複的樣式，這點與jquery沒有關係了。
你可能會這樣寫 "#text{} #text>.span:{font-size:24px;} #text>​.a{font-size:24px;}" ，那麼能夠這麼寫".text{font-size:24px;}"，讓下面的繼承這個樣式。

　　這些我對css選擇器的一些見解，上面沒有說到的就是通配符選擇器（*）和屬性選擇器，這個其實才是最消耗性能的，由於是針對全部的元素，即使是配合其餘的選擇器來用也很耗性能。實際上的ID選擇器使用的機會不是很高，由於Html中的ID是惟一的，不會有不少的ID。那麼從上面的分析，能夠獲得這麼一個規則：儘可能使用類選擇器(class)​，避免使用通配符選擇器（*）​和屬性選擇器，後代選擇器和子選擇器也儘可能避免。
　　下面是網絡資料（主要是阿里的博客）找到的一些資料：
　　英文文檔參考資源：
　　http://blog.archive.jpsykes.com/151/testing-css-performance/
　　http://blog.archive.jpsykes.com/152/testing-css-performance-pt-2/
　　http://blog.archive.jpsykes.com/153/more-css-performance-testing-pt-3/
　　Testing CSS Performance Jon Sykes
　　https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS?redirectlocale=en-US&redirectslug=Writing_Efficient_CSS
​　　

　　來自：http://www.subying.com/archives/52.html subying blog