前端性能優化---選擇器優化

　　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)​，避免使用通配符選擇器（*）​和屬性選擇器，後代選擇器和子選擇器也儘可能避免。