高性能之css
避免使用@import
有兩種方式加載樣式文件，一種是link元素，另一種是CSS 2.1加入@import。而在外部的CSS文件中使用@import會使得頁面在加載時增加額外的延遲。雖然規則允許在樣式中調用@import來導入其它的CSS，但瀏覽器不能並行下載樣式，就會導致頁面增添了額外的往返耗時。比如，第一個CSS文件first.css包含了以下內容：@import url(“second.css”)。那麽瀏覽器就必須先把first.css下載、解析和執行後，才發現及處理第二個文件second.css。簡單的解決方法是使用<link>標記來替代@import，比如下面的寫法就能夠並行下載CSS文件，從而加快頁面加載速度：
<link rel="stylesheet" href=""first.css"" /> <link rel="stylesheet" href="second.css" />View Code
需要註意的是一個頁面中的CSS文件不宜過多，否則應該簡化及合並外部的CSS文件以節省往返請求時間(RTT)提升頁面加載速度
避免AlphaImageLoader濾鏡
IE獨有屬性AlphaImageLoader用於修正7.0以下版本中顯示PNG圖片的半透明效果。這個濾鏡的問題在於瀏覽器加載圖片時它會終止內容的呈現並且凍結瀏覽器。在每一個元素（不僅僅是圖片）它都會運算一次，增加了內存開支，因此它的問題是多方面的。完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來代替，這種格式能在IE中很好地工作。如果你確實需要使用AlphaImageLoader，請使用下劃線_filter又使之對IE7以上版本的用戶無效。
避免CSS表達式
CSS表達式是動態設置CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支持CSS表達式。下面的例子中，使用CSS表達式可以實現隔一個小時切換一次背景顏色：
background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" )
如上所示，expression中使用了JavaScript表達式。CSS屬性根據JavaScript表達式的計算結果來設置。expression方法在其它瀏覽器中不起作用，因此在跨瀏覽器的設計中單獨針對Internet Explorer設置時會比較有用。
表達式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動鼠標時都會要重新計算一次。給CSS表達式增加一個計數器可以跟蹤表達式的計算頻率。在頁面中隨便移動鼠標都可以輕松達到10000次以上的計算量。一個減少CSS表達式計算次數的方法就是使用一次性的表達式，它在第一次運行時將結果賦給指定的樣式屬性，並用這個屬性來代替CSS表達式。如果樣式屬性必須在頁面周期內動態地改變，使用事件句柄來代替CSS表達式是一個可行辦法。如果必須使用CSS表達式，一定要記住它們要計算成千上萬次並且可能會對你頁面的性能產生影響。
避免通配選擇器
CSS選擇器對性能的影響源於瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優化選擇器的原則是應盡量避免需要消耗更多匹配時間的選擇器。而在這之前我們需要了解CSS選擇器匹配的機制，如例子的子選擇器規則：
#header > a {font-weight:blod;}
我們中的大多數人都是從左到右的閱讀習慣，可能也會習慣性的設定瀏覽器也是從左到右的方式進行匹配規則，因為會推測這條規則的開銷並不高。我們這樣假象瀏覽器會像這樣的方式工作：找到唯一的id為header為的元素，然後把這個樣式規則應用到直系子元素中的a元素上。我們知道文檔中只有一個id為header的元素，並且它只有幾個a類型的子節點，所以這個CSS選擇器應該相當高效。
事實上，卻恰好相反，CSS選擇器是從右到左進行規則匹配。了解這個機制後，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的a元素並且確定其父元素的id是否為header。
如果把例子的子選擇器改為後代選擇器則會開銷更多，在遍歷頁面中所有a元素後還需向其上級遍歷直到根節點。
#header a {font-weight:blod;}
理解了CSS選擇器從右到左匹配的機制後，可以理解選擇器中最右邊的規則往往決定了瀏覽器繼續左移匹配的工作量，我們把最右邊選擇規則稱之為關鍵選擇器。
通配選擇器使用 * 符合表示，可匹配文檔中的每一個元素。如下例規則將所有元素的字體大小設置為20px：
* { font-size:20px;}
通配選擇器作用於所有的元素，如規則最右邊為通配符：
.selected * {color: red;}
瀏覽器匹配文檔中所有的元素後分別向上逐級匹配class為selected的元素，直到文檔的根節點，因此其匹配開銷是非常大的，通常比開銷最小的ID選擇器高出1~3個數量級，所以應避免使用關鍵選擇器是通配選擇器的規則。
避免單規則的屬性選擇器
屬性選擇器根據元素的屬性是否存在或其屬性值進行匹配，如下例規則會把herf屬性值等於”#index”的鏈接元素設置為紅色：
.selected [href=”#index”] {color: red;}
但其匹配開銷是非常大的，瀏覽器先匹配所有的元素，檢查其是否有href屬性並且herf屬性值等於”#index”， 然後分別向上逐級匹配class為selected的元素，直到文檔的根節點。所以應避免使用關鍵選擇器是單規則屬性選擇器的規則。
避免類正則的屬性選擇器
CSS3添加了復雜的屬性選擇器，可以通過類正則表達式的方式對元素的屬性值進行匹配。當然這些類型的選擇器定是會影響性能的，正則表達式匹配會比基於類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=， |=， ^=， $=， 和 ~=語法的屬性選擇器。
移除無匹配的樣式
移除無匹配的樣式，有兩個好處：
第一，刪除無用的樣式後可以縮減樣式文件的體積，加快資源下載速度；
第二，對於瀏覽器而言，所有的樣式規則的都會被解析後索引起來，即使是當前頁面無匹配的規則。移除無匹配的規則，減少索引項，加快瀏覽器查找速度；
原創文章轉載請註明：
轉載自AlloyTeam：http://www.alloyteam.com/2012/10/high-performance-css/
高性能之css