CSS性能優化探討(轉BorisHuai)

大部分前端開發人員都不關心CSS性能優化，其實對於一個複雜的頁面來說，高效的選擇器還是可以帶來一定的性能提升的。

1. CSS 選擇器

瀏覽器是“從右往左”來分析 class 的，它的匹配規則是從右向左來進行匹配的，因此最右邊的選擇符就是關鍵選擇符。

• Descendant selector

  #toc > li {font-weight: bold}

  瀏覽器首先會查找頁面上所有的“li”節點，然後再去做進一步的判斷：如果它的父節點的 id 爲“toc”，則匹配成功。

• Descendant selector

  #toc  li {font-weight: bold}

  這個效率比之前的“child selector”效率更慢，而且要慢很多。瀏覽器先便利所有的“li”節點，然後步步上溯其父節點，直到 DOM 結構的根節點（document），如果有某個節點的 id 爲“toc”，則匹配成功，否則繼續查找下一個“li”節點。

• 儘量避免 universal rules

  [hidden="true"] { ... } /* A universal rule */

  這裏的匹配規則很明顯：查找頁面上的所有節點，如果有節點存在“hidden”屬性，並且其屬性值爲“true”，則匹配成功。這是最耗時耗力的匹配，頁面上的所有節點都需要進行匹配運算，這種規則應儘量避免。

• Id-categorized 規則與 tag name 或 class 規則並行

  button#goButton {...};----->>#goButton
                       .fundation#testIcon {...};----->>#testIcon

  這裏，按照我們常規的理解，箭頭左邊的寫法似乎是應該更快的，因爲它的限制更多。其實不然，id 是全局唯一的，在匹配 CSS 選擇器時瀏覽器定位到 id 是最快的，如果伴隨有其他的非 id 的 selector，反而會影響匹配的效率。

• 關於 class-categorized 規則

  button.indented {...}----->>.button-indented {...}

  程序員們經常會給某個 Class 前面加上標籤名稱（Tag Name），以更精確且快速的定位該節點，但是這樣往往效率更差。和清單 8 中的原理一樣，頁面上的 class 在全局範圍內來講應該是唯一的，用唯一的 Class 名稱來定位一個節點往往比組合定位更加快捷。事實上，這種做法也可以避免由於開發修改頁面元素的類型（Tag）而導致的樣式失效的情況，做到樣式與元素的分離，兩者獨立維護。

• 儘量減少規則數量

  Span[mailfolder="true"] > table > tr > td.columnClass {...}
                       ------------------->>>>>>>
                       .span-mailfolder-tbl-tdCol {...}

  規則越多，匹配越慢，上面一種規則需要進行 6 項匹配，先找“columnClass”，再找“td”，然後是“tr”，“table”，最後是符合“mailfolder”爲“true”的 span，這種效率是非常慢的。如果用一個比較特殊的 class 替代（span-mailfolder-tbl-tdCol），效率會快上好幾倍。

• 儘量避免使用 descendant selector

   treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

  Descendant 選擇器是耗時相對高的選擇器，通常來講，它在 CSS 裏的使用應該是儘量避免的，如果能用 child 選擇器替代就應該儘量這樣去做。

• 利用 CSS 的繼承機制

  在 CSS 中，有很多 CSS 的屬性以可以繼承的，如果某個節點的父節點已經設定了上述的 CSS 樣式（如：color, font 等 …），並且子節點無需更改該樣式，則無需再作相關設定，同時，也可以利用這一點：如果很多子節點都需要設定該 CSS 屬性值，可以統一設定其父節點的該 CSS 屬性，這樣一來，所有的子節點再無需做額外設定，加速了 CSS 的分析效率。

2. 把 Stylesheets 放在 HTML 頁面頭部

瀏覽器在所有的 stylesheets 加載完成之後，纔會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面裏的任何內容，頁面會一直呈現空白。這也是爲什麼要把 stylesheet 放在頭部的原因。如果放在 HTML 頁面底部，頁面渲染就不僅僅是在等待 stylesheet 的加載，還要等待 html 內容加載完成，這樣一來，用戶看到頁面的時間會更晚。

3. 避免使用 CSS Expressions：

Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )

Expression 只有 IE 支持，而且他的執行比大多數人想象的要頻繁的多。不僅頁面渲染和改變大小 (resize) 時會執行，頁面滾動 (scroll) 時也會執行，甚至連鼠標在頁面上滑動時都會執行。在 expression 裏面加上一個計數器就會知道，expression 的執行上相當頻繁的。鼠標的滾動很容易就會使 expression 的執行次數超過 10000。

4. 避免使用 Filter：

IE 特有的 AlphaImageLoader filter 是爲了解決 IE6 及以前版本不支持半透明的 PNG 圖片而存在的。但是瀏覽器在下載 filter 裏面的圖片時會“凍結”瀏覽器，停止渲染頁面。同時 filter 也會增大內存消耗。最不能忍受的是 filter 樣式在每個頁面元素（使用到該 filter 樣式）渲染時都會被瀏覽器分析一次，而不是像一般的背景圖片渲染模式：使用過該背景圖片的所有元素都是被瀏覽器一次性渲染的。針對這種情況，最好的解決辦法就是使用 PNG8。

5. CSS 縮寫：

CSS 縮寫可以讓你用極少的代碼定義一系列樣式屬性，這種做法可以極大程度的縮減代碼量以達到提高性能的目的。