怎樣寫(xiě)網(wǎng)頁(yè)CSS渲染更高效？

 我并不經(jīng)常想這個(gè)問(wèn)題......我們寫(xiě)的css的效率是怎么樣的呢，瀏覽器渲染的速度又如何呢？

這是應(yīng)該是瀏覽器開(kāi)發(fā)者應(yīng)該關(guān)心的(頁(yè)面加載更快，用戶(hù)就會(huì)更愉快)。Mozilla有一篇文章： about best practices . Google 當(dāng)然也很關(guān)心這個(gè)問(wèn)題，他們也有這樣一篇文章：Optimize browser rendering 。

讓我們了解下他們主要倡導(dǎo)的東東，然后討論他們的實(shí)用性。

從右到左

瀏覽器如何讀取你的CSS選擇器有一個(gè)很重要的原則，那就是它們從右到左讀取。這意味這像 ul > li a[title="home"] 這樣的選擇器，a[title="home"] 將是最先被讀取的。這一部分通常被稱(chēng)為 “key selector” （可否稱(chēng)為“目標(biāo)選擇器” -_-!）選擇器的最后一部分，也是被選擇的標(biāo)簽。

ID"s 是最有效率的，通用符是最慢的

有四種目標(biāo)選擇器：ID, class, tag和通用符。看下他們各自的效率如何:
#main-navigation { } /* ID (最快) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (最慢) */
#content [title="home"] /* Universal */ 然后我們結(jié)合從右到左和目標(biāo)選擇器的概念，我們可以知道下面這個(gè)選擇器并不高效：
#main-nav > li { } /* 看著很快實(shí)則很慢 */
盡管這讓人有點(diǎn)費(fèi)解......因?yàn)镮D"s是最高效的，瀏覽器可以通過(guò)ID迅速的找到 li。但事實(shí)是，li 標(biāo)簽是被先讀取的。

不要用標(biāo)簽修飾

死也不要像下面這樣干：

ul#main-navigation { }

ID"s 是唯一的，所以不需要用標(biāo)簽修飾，這只會(huì)讓它更低效。
如果你可以避免的話(huà)，也不要用它修飾 class 。class 不是唯一的，所以理論上你可以把它用在不同的標(biāo)簽。如果你愿意的話(huà)，你可以用標(biāo)簽控制不同的樣式，這樣你可能需要標(biāo)簽修飾（比如：li.first），但這樣做的人很少，所以，don"t .

絕對(duì)沒(méi)有比用后代選擇器更糟糕的做法了
David Hyatt:
后代選擇器是CSS里最昂貴的選擇器，昂貴得可怕——特別是當(dāng)它放在標(biāo)簽和通用符后面時(shí)。
就如下面這個(gè)東東一樣，絕對(duì)的效率毒瘤：

html body ul li a { }

一個(gè)選擇器渲染失敗比這個(gè)選擇器被渲染更高效

我不是很確定是否有更好的證據(jù)去證明這一點(diǎn)，因?yàn)槿绻阌写罅康倪x擇器在CSS樣式表里無(wú)法找到，這樣的事情貌似很離奇，但一點(diǎn)必需注意的是，從右到左的解釋一個(gè)選擇器來(lái)說(shuō)，一旦它找不到，那它就會(huì)停止嘗試。然而如果它找到了，那它就需要花更多精力去解釋了。

試想一下為何你這樣寫(xiě)選擇器

思考下這東東：

#main-navigation li a { font-family: Georgia, Serif; }

你可能不需要從 a 選擇器開(kāi)始（如果你只是想換個(gè)字體）。下面這個(gè)可能更高效些：

#main-navigation { font-family: Georgia, Serif; }

實(shí)用性

還刻前面提到的Mozilla的一篇文章？已經(jīng)有十年了。事實(shí)是：計(jì)算機(jī)比十年前變慢了（不是我理解錯(cuò)了，還是作者想說(shuō)現(xiàn)在的WEB越來(lái)越復(fù)雜了）。我感覺(jué)這東東在當(dāng)年似乎還更受重視。十年前我還是個(gè)21歲的英俊小生，當(dāng)然我不覺(jué)得那里我會(huì)認(rèn)識(shí)css這東東。所以我也無(wú)法跟你講以前的情況......但我覺(jué)得渲染效率的問(wèn)題之所以沒(méi)被重視是因?yàn)檫@從來(lái)就不是一個(gè)大問(wèn)題。
這是我的一些看法：不管怎樣上面提到的東東都是有意義的，你可以按照上面的方法去做，因?yàn)樗⒉粫?huì)限制你的CSS制作。但你也沒(méi)必要太教條主義。如果你是個(gè)完美主義者，而之前又沒(méi)有考慮過(guò)那東東，那是時(shí)候去重新看一下你之前寫(xiě)的一些樣式是否有改進(jìn)的地方了。如果你沒(méi)發(fā)現(xiàn)你的網(wǎng)站明顯的渲染緩慢，那大可別太在意，在以后的工作中多注意就行了。

超級(jí)快速，零實(shí)用性

我們知道ID"s 是最高效的選擇器。當(dāng)你想讓渲染速度最高效時(shí)，你可能會(huì)給每個(gè)獨(dú)立的標(biāo)簽配置一個(gè)ID，然后用這些ID寫(xiě)樣式。那會(huì)超級(jí)快，也超級(jí)荒唐。這樣的結(jié)果是語(yǔ)義極差，維護(hù)難到了極點(diǎn)。即使在核心部分你也不應(yīng)該見(jiàn)過(guò)這樣做的。我認(rèn)為這個(gè)可以提醒我們不要為了高效的CSS放棄語(yǔ)義和可維護(hù)性。

Thanks to Jason Beaudoin for emailing me about the idea. If anyone knows more about this stuff, or if you have additional tips that you use in this same vein, let’s hear it!

順便提一下，因?yàn)镃SS選擇器被很多javascript庫(kù)使用，上面提到的東東仍然適用，ID選擇器還是最快的，后代選擇器和類(lèi)似的東東比較慢。

 

---