CSS選擇器的一般性優(yōu)化建議
如何對選擇器進行優(yōu)化并不是一個那么新鮮的話題，但是個人覺得，css作為前端開發(fā)人員一項必備的專業(yè)技能，有必要深入了解下css在頁面渲染的一些關鍵點，并以此為css的優(yōu)化提供依據(jù)。我們這篇文章將討論選擇器優(yōu)化的一般性建議。
瀏覽器如何應用選擇器
在給出css選擇器優(yōu)化建議之前，我們有必要弄清楚這樣一個問題，那就是瀏覽器如何識別選擇器并對相應的html元素進行樣式渲染？
瀏覽器對CSS的匹配原理是這樣的，瀏覽器讀取選擇器的順序是由右到左進行。
比如，
div#divBox p span.red {
color:red;
}瀏覽器的匹配查找順序如下，
- 查找頁面中所有
class=red的span元素 - 查找1.結(jié)果的父元素中是否有
p元素 - 查找2.結(jié)果的父元素中是否有
id=divBox的div元素
如果以上3步都能找到相應的結(jié)果，那么則會給匹配的最終結(jié)果應用相關的css樣式。
css選擇器的效率
從上面的結(jié)論和示例中，我們知道瀏覽器是從右到左逐個匹配css表達式的。那么為什么瀏覽器會采用這種從右至左的方法來匹配css表達式呢？其好處有兩個，第一是為了盡早的過濾掉無關的樣式規(guī)則第二是為了盡快的匹配到目標元素。很顯然表達式最右的樣式規(guī)則以及整個css表達式的長度將決定整個匹配過程的復雜度。這個最右部分的css表達式，我們稱之為keyselector（關鍵選擇器），它將決定css選擇器的效率高低。
這篇文章中給出了常規(guī)的css選擇器的效率，
- id選擇器，比如
#header - 類選擇器，比如
.main - 類型選擇器，比如
div - 兄弟選擇器，比如
div + p - 子元素選擇器，比如
div > p - 包含選擇器，比如
div span - 通配選擇器，比如
div * - 屬性選擇器，比如
input[type="text"] - 偽類選擇器，比如
a:hover,ul:nth-child(2n)
可見id選擇器的效率最高，而偽類選擇器的效率最低。CSS3提供的各種偽類選擇器雖然用起來很方便，不過其效率反而是最低的。
根據(jù)上面的理論，我們會得出下面的結(jié)論，div #user會比#user div的效率要高。因為前一個選擇器表達式的關鍵選擇器#user是一個id選擇器，后一個選擇器表達式的關鍵選擇器div是一個類型選擇器，而id選擇器的效率要比類型選擇器的效率要高。換句話說，前者經(jīng)過關鍵選擇器的匹配之后得到的集合要比后者要小，在一個更小集合上再次做匹配篩選，明顯要更加快一點。
css的優(yōu)化建議
一般來說，我們書寫css時應該遵循下面幾點，
- 規(guī)范css的命名和屬性書寫，能夠體現(xiàn)出css代碼的整齊性和條理性
- 應用css優(yōu)先級（css權重）的知識避免冗余的兄弟選擇器、子選擇器、包含選擇器，寫出精簡、合理的css表達式
- 不到不得以勿用各種css hack
- 合理使用css的絕對定位布局（絕對定位往往不太利于后續(xù)的維護和變更）
- 合理使用css的繼承
- 盡量使用簡寫風格的css樣式，將相似屬性寫在一起（主要是為了縮減css文件字節(jié)，加快瀏覽器渲染）
- 限制css的嵌套層級，一般來說4層之內(nèi)都是可以接受的
- 模塊化css樣式（可以模仿業(yè)內(nèi)流行css框架的做法，比如bootstrap）
更多建議：