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