簡介
　　 Web  開發(fā) 中經(jīng)常會遇到性能的問題，尤其是  Web  2.0 的應(yīng)用。 CSS  代碼是控制頁面顯示樣式與效果的最直接“工具”，但是在性能調(diào)優(yōu)時他們通常被 Web 開發(fā)工程師所忽略，而事實上不規(guī)范的 CSS 會對頁面渲染的效率有嚴(yán)重影響，尤其是對于結(jié)構(gòu)復(fù)雜的 Web 2.0 頁面，這種影響更是不可磨滅。所以，寫出規(guī)范的、高性能的 CSS 代碼會極大的提高應(yīng)用程序的效率。本文主要來探討一下如何 優(yōu)化 ，以及從哪些方面優(yōu)化應(yīng)用程序的 CSS 代碼，從而最大限度的提高 Web 應(yīng)用的性能。
 
　　CSS 性能調(diào)優(yōu)
　　CSS 代碼的分析與渲染都是由瀏覽器來完成的，所以，了解瀏覽器的 CSS 工作機制對我們的優(yōu)化有至關(guān)重要的作用。這篇文章我們主要從如下幾個方面入手來介紹一下 CSS 的性能優(yōu)化：
　　Style 標(biāo)簽的相關(guān)調(diào)優(yōu)
　　特殊的 CSS 樣式使用方式
　　CSS 縮寫
　　CSS 的聲明
　　CSS  選擇器 
　　把 Stylesheets 放在  HTML  頁面頭部：
　　瀏覽器在所有的 stylesheets 加載完成之后，才會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面里的任何內(nèi)容，頁面會一直呈現(xiàn)空白。這也是為什么要把 stylesheet 放在頭部的原因。如果放在 HTML 頁面底部，頁面渲染就不僅僅是在等待 stylesheet 的加載，還要等待 html 內(nèi)容加載完成，這樣一來，用戶看到頁面的時間會更晚。
　　對于 @import 和 兩種加載外部 CSS 文件的方式：@import 就相當(dāng)于是把 標(biāo)簽放在頁面的底部，所以從優(yōu)化性能的角度看，應(yīng)該盡量避免使用 @import 命令
　　避免使用 CSS Expre ssi ons：
　　參考下述代碼：
　　 清單 1. CSS Expression 案例 
  Background-color: expression( (new Date()). get Hours()%2 ? "#B8D4FF" : "#F08A00" )   
 
 
　　Expression 只有 IE 支持，而且他的執(zhí)行比大多數(shù)人想象的要頻繁的多。不僅頁面渲染和改變大小 (resize) 時會執(zhí)行，頁面滾動 (scroll) 時也會執(zhí)行，甚至連鼠標(biāo)在頁面上滑動時都會執(zhí)行。在 expression 里面加上一個計數(shù)器就會知道，expression 的執(zhí)行上相當(dāng)頻繁的。鼠標(biāo)的滾動很容易就會使 expression 的執(zhí)行次數(shù)超過 10000。
　　避免使用 Filter：
　　IE 特有的 AlphaImageLoader filter 是為了解決 IE6 及以前版本不支持半透明的 PNG 圖片而存在的。但是瀏覽器在 下載  filter 里面的圖片時會“凍結(jié)”瀏覽器，停止渲染頁面。同時 filter 也會增大內(nèi)存消耗。最不能忍受的是 filter 樣式在每個頁面元素(使用到該 filter 樣式)渲染時都會被瀏覽器分析一次，而不是像一般的背景圖片渲染模式：使用過該背景圖片的所有元素都是被瀏覽器一次性渲染的。
　　針對這種情況，最好的解決辦法就是使用 PNG8。
　　CSS 縮寫：
　　CSS 縮寫可以讓你用極少的代碼定義一系列樣式屬性，這種做法可以極大程度的縮減代碼量以達(dá)到提高性能的目的。
　　 清單 2. Colour 縮寫 
  #000000    ------  >  >      #000    #336699    ------ >  >      #369   
 
 
　　關(guān)于顏色，重復(fù)的屬性值可以省略。
　　 清單 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 s