最佳化瀏覽器渲染（CSS）

一旦資源被下載到用戶端，瀏覽器仍然需要載入、解釋和渲染HTML/CSS/JavaScript代碼。你可以利用目前的瀏覽器的特點，通過整理你的代碼來提高你的頁面在用戶端上的效能。

• 使用高效的CSS選取器
• 避免使用CSS運算式
• 把CSS檔案放在文檔的頭部
• 指定映像的尺寸
• 指定字元集（Specify a character set）

使用高效的CSS選取器

概觀：
避免使用需要匹配大量元素的低效率的關鍵選取器，可以加快頁面的渲染。

細節：
瀏覽器通過構建一個內部文檔樹去解析HTML。然後它根據標準的CSS級聯，繼承和定序去匹配元素在不同的樣式表中指定的樣式。在Mozilla上的實現（也有可能是其他原因），CSS引擎都是通過樣式規則去匹配每個元素。引擎是從最右邊的選取器開始從右至左逐個去尋找，直到找到一個匹配項或丟棄該規則。
根據該原理，引擎需要匹配的規則是越少越好。當然，刪除未使用的CSS也是提高渲染效能的一個重要步驟。包含大量元素或大量CSS規則的頁面，採用最佳化規則定義的網頁本身也能增強效能。最佳化規則的關鍵在於儘可能具體地定義規則，避免不必要的冗餘，以至於樣式引擎可以不必通過匹配不必要的規則來快速渲染。

以下類別的規則被認為是低效的：

• 與後代選取器規則

1)帶通用選取器的規則
body * {...}
.hide-scrollbars * {...}
2)帶標籤選取器的規則
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
後代選取器是低效的，因為瀏覽器中的每個元素的匹配都必須遍曆DOM樹，評估每一個祖先元素，直到找到一個匹配或到達根項目。不特定的鍵的數量越多，需要進行評估的節點就越多。

• 與子集或相鄰選取器規則

1）與通用選取器的規則
body > * {...}
.hide-scrollbars > * {...}
2）帶標籤選取器的規則
ul > li > a {...}
#footer > h3 {...}
子集或相鄰選取器是低效的，因為對於每一個匹配的元素，瀏覽器不得不去評估另一個節點。對於每個子選取器變得相當於做了兩倍的功。同樣，不確定的鍵的數量越多，需要評估的節點就越多。然而，低效的同時，仍然在效能上更優。

• 規則過於合格選取器

eg.
ul#top_blue_nav {...}
form#UserLogin {...}
ID選取器是唯一的定義。包括標籤或者class前置只是增加了不需要評估的冗餘資訊。
非連結元素使用偽類的規則
eg.
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
非連結元素上使用:hover偽類別選取器，某些情況下導致在IE7和IE8運行緩慢。不使用嚴格的doctype聲明的話，IE7和IE8會忽略在非連結元素上使用偽類這個問題。當使用嚴格的doctype的話，在非連結元素上使用偽類的話，會導致效能下降。

建議：

• 避免使用通用選取器

允許元素繼承祖先元素或給多個元素使用一個類。

• 儘可能地讓你的規則更詳細

比起標籤選取器，更建議使用class或者id選取器。

• 刪除冗餘前置

以下限定詞是多餘的：
1）給id加上標籤選取器或者class做前置
2）給class加上標籤選取器做前置（無論如何，給一個標籤添加一個class是不錯的設計）

• 避免使用後代選取器，尤其是那些指定冗餘的標籤

例如，規則 body ul li a {...}就指定了一個冗餘的body標籤，因為下級的所有的元素都是body的娃。

• 使用類別選取器代替後代選取器

eg.如果你需要給一個有序列表，一個無序列表使用不同的樣式，你也許會這麼做：
ul li {color: blue;}
ol li {color: red;}
其實我們建議你使用兩個類去定義：
eg.
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
如果你必須使用後代選取器或者喜歡用子選取器，那至少使用一個額外的節點，而非冷不丁地來幾個標籤選取器。

• 避免在IE瀏覽器下給非連結元素添加偽類別選取器

或者你可以自己在IE7和IE8環境下測試一下滑鼠移至上方是否可用，如果發現懸停會導致效能問題，那建議使用javascript的onmouseover事件去處理。

 

附：只翻譯了一部分，給自己當筆記用的，覺得不好，可以看E文的。原站地址：https://developers.google.com/speed/docs/best-practices/rendering?hl=zh-CN