簡介

　　Web 開發中經常會遇到性能的問題，尤其是 Web 2.0 的應用。CSS 代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調優時他們通常被 Web 開發工程師所忽略，而事實上不規范的 CSS 會對頁面渲染的效率有嚴重影響，尤其是對于結構復雜的 Web 2.0 頁面，這種影響更是不可磨滅。所以，寫出規范的、高性能的 CSS 代碼會極大的提高應用程序的效率。本文主要來探討一下如何優化，以及從哪些方面優化應用程序的 CSS 代碼，從而最大限度的提高 Web 應用的性能。

　　CSS 性能調優

　　CSS 代碼的分析與渲染都是由瀏覽器來完成的，所以，了解瀏覽器的 CSS 工作機制對我們的優化有至關重要的作用。這篇文章我們主要從如下幾個方面入手來介紹一下 CSS 的性能優化：

　　Style 標簽的相關調優

　　特殊的 CSS 樣式使用方式

　　CSS 縮寫

　　CSS 的聲明

　　CSS 選擇器

　　把 Stylesheets 放在 HTML 頁面頭部：

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

　　對于 @import 和 兩種加載外部 CSS 文件的方式：@import 就相當于是把 標簽放在頁面的底部，所以從優化性能的角度看，應該盡量避免使用 @import 命令

　　避免使用 CSS Expressions：

　　參考下述代碼：

　　清單 1. CSS Expression 案例

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

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

　　避免使用 Filter：

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

　　針對這種情況，最好的解決辦法就是使用 PNG8。

　　CSS 縮寫：

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

　　清單 2. Colour 縮寫

#000000     ------>>     #000  
#336699     ------>>     #369 

　　關于顏色，重復的屬性值可以省略。

　　清單 3. 各種縮寫方式

Margin-top: 2px;  
 Margin-right: 5px;  
 Margin-bottom: 2em;  
 Margin-left: 15px;     ----->>     Margin: 2px 5px 2em 15px;  
 
 Border-width: 1px;  
 Border-style: solid;  
 Border-color: #000     ----->>     border: 1px solid #000  
 
 Font-style: italic;  
 Font-variant: small-caps;  
 Font-weight: bold;  
 Font-size: 1em;  
 Line-height: 140%;  
 Font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief  
 
 Background-color: #f00;  
 Background-image: url(background.gif);  
 Background-repeat: no-repeat;  
 Background-attachment: fixed;  
 Background-position: 0 0;  
  ----->>background: #f00 url(background.gif) no-repeat fixed 0 0  
 
 list-style-type: square;  
 list-style-position: inside;  
 List-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif)