CSS選擇器的一般性優(yōu)化建議

如何對選擇器進(jìn)行優(yōu)化并不是一個那么新鮮的話題，但是個人覺得，css作為前端開發(fā)人員一項(xiàng)必備的專業(yè)技能，有必要深入了解下css在頁面渲染的一些關(guān)鍵點(diǎn)，并以此為css的優(yōu)化提供依據(jù)。我們這篇文章將討論選擇器優(yōu)化的一般性建議。

瀏覽器如何應(yīng)用選擇器

在給出css選擇器優(yōu)化建議之前，我們有必要弄清楚這樣一個問題，那就是瀏覽器如何識別選擇器并對相應(yīng)的html元素進(jìn)行樣式渲染？

瀏覽器對CSS的匹配原理是這樣的，瀏覽器讀取選擇器的順序是由右到左進(jìn)行。

比如，

div#divBox p span.red {
    color:red;
}

瀏覽器的匹配查找順序如下，

1. 查找頁面中所有class=red的span元素
2. 查找1.結(jié)果的父元素中是否有p元素
3. 查找2.結(jié)果的父元素中是否有id=divBox的div元素

如果以上3步都能找到相應(yīng)的結(jié)果，那么則會給匹配的最終結(jié)果應(yīng)用相關(guān)的css樣式。

css選擇器的效率

從上面的結(jié)論和示例中，我們知道瀏覽器是從右到左逐個匹配css表達(dá)式的。那么為什么瀏覽器會采用這種從右至左的方法來匹配css表達(dá)式呢？其好處有兩個，第一是為了盡早的過濾掉無關(guān)的樣式規(guī)則第二是為了盡快的匹配到目標(biāo)元素。很顯然表達(dá)式最右的樣式規(guī)則以及整個css表達(dá)式的長度將決定整個匹配過程的復(fù)雜度。這個最右部分的css表達(dá)式，我們稱之為keyselector（關(guān)鍵選擇器），它將決定css選擇器的效率高低。

這篇文章中給出了常規(guī)的css選擇器的效率，

1. id選擇器，比如#header
2. 類選擇器，比如.main
3. 類型選擇器，比如div
4. 兄弟選擇器，比如div + p
5. 子元素選擇器，比如div > p
6. 包含選擇器，比如div span
7. 通配選擇器，比如div *
8. 屬性選擇器，比如input[type="text"]
9. 偽類選擇器，比如a:hover,ul:nth-child(2n)

可見id選擇器的效率最高，而偽類選擇器的效率最低。CSS3提供的各種偽類選擇器雖然用起來很方便，不過其效率反而是最低的。

根據(jù)上面的理論，我們會得出下面的結(jié)論，div #user會比#user div的效率要高。因?yàn)榍耙粋€選擇器表達(dá)式的關(guān)鍵選擇器#user是一個id選擇器，后一個選擇器表達(dá)式的關(guān)鍵選擇器div是一個類型選擇器，而id選擇器的效率要比類型選擇器的效率要高。換句話說，前者經(jīng)過關(guān)鍵選擇器的匹配之后得到的集合要比后者要小，在一個更小集合上再次做匹配篩選，明顯要更加快一點(diǎn)。

css的優(yōu)化建議

一般來說，我們書寫css時應(yīng)該遵循下面幾點(diǎn)，

1. 規(guī)范css的命名和屬性書寫，能夠體現(xiàn)出css代碼的整齊性和條理性
2. 應(yīng)用css優(yōu)先級（css權(quán)重）的知識避免冗余的兄弟選擇器、子選擇器、包含選擇器，寫出精簡、合理的css表達(dá)式
3. 不到不得以勿用各種css hack
4. 合理使用css的絕對定位布局（絕對定位往往不太利于后續(xù)的維護(hù)和變更）
5. 合理使用css的繼承
6. 盡量使用簡寫風(fēng)格的css樣式，將相似屬性寫在一起（主要是為了縮減css文件字節(jié)，加快瀏覽器渲染）
7. 限制css的嵌套層級，一般來說4層之內(nèi)都是可以接受的
8. 模塊化css樣式（可以模仿業(yè)內(nèi)流行css框架的做法，比如bootstrap）

參考列表

• CSS選擇器的優(yōu)化
• Writing efficient CSS selectors
• css原理及其優(yōu)化