CSS解讀前端效能最佳化的具體分析

避免使用@import

外部的CSS檔案中使用@import會使得頁面在載入時增加額外的延遲。

一個CSS檔案first.css包含了以下內容：@import url(“second.css”)。瀏覽器先把first.css下載、解析和執行後，發現及處理第二個檔案second.css。簡單的 解決方案是使用<link>標記來替代@import，並行下載CSS檔案，從而加快頁面載入速度.

避免AlphaImageLoader濾鏡

什麼是AlphaImageLoader？IE專屬屬性，用於修正7.0以下版本中顯示PNG圖片的半透明效果。

問題：瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器，在每一個元素（不僅僅是圖片）它都會運算一次，增加了記憶體開支。

解決方案：1、PNG8格式來代替，這種格式能在IE中很好地工作。

2、確實需要使用AlphaImageLoader，使用底線_filter，使IE7以上版本的使用者無效。

避免CSS運算式

例：

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

CSS運算式是動態設定CSS屬性的強大（但危險）方法。Internet Explorer從第5個版本開始支援CSS運算式。

問題：在頁面顯示和縮放、滾動、移動滑鼠時都會要 重新計算一次。給CSS運算式增加一個計數器可以跟蹤運算式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。

解決：減少CSS表 達式計算次數的方法就是使用一次性的運算式，它在第一次運行時將結果賦給指定的樣式屬性，並用這個屬性來代替CSS運算式。如果樣式屬性必須在頁面周期內 動態地改變，使用事件控制代碼來代替CSS運算式是一個可行辦法。如果必須使用CSS運算式，一定要記住它們要計算成千上萬次並且可能會對你頁面的效能產生影 響。

避免通配選取器

在學習CSS初期，我們在做網頁的時候經常會使用*{margin：0；padding：0;}，以此來消除標籤的預設布局和不同瀏覽器對於同一個標籤的渲染。

而我們有時候會看到reset的寫法。

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

這些人為什麼要這麼寫，下面的內容我們會得到答案

例：

#header > a {font-weight:blod;}

CSS選取器是從右至左進行規則匹配。所以在瀏覽器中這條語句實現為：

瀏覽器遍曆頁面中所有的a元素——>其父元素的id是否為header。

例：

#header  a {font-weight:blod;}

這個例子比上一個消耗的時間更多

遍曆頁面中所有a元素——>向其上級遍曆直到根節點

例：

.selected * {color: red;}

匹配文檔中所有的元素——>分別向上逐級匹配class為selected的元素，直到文檔的根節點

所以我們應該避免使用通配選取器。

移除無匹配的樣式

第一，刪除無用的樣式後可以縮減樣式檔案的體積，加快資源下載速度；

第二，對於瀏覽器而言，所有的樣式規則的都會被解析後索引起來，即使是當前頁面無匹配的規則。移除無匹配的規則，減少索引項目，加快瀏覽器尋找速度；

避免單規則的屬性選取器

瀏覽器匹配所有的元素——>檢查是否有href屬性並且herf屬性值等於”#index”——>分別向上逐級匹配class為selected的元素，直到文檔的根節點。

避免類正則的屬性選取器

Regex匹配會比基於類別的匹配會慢很多。大部分情況下我們應盡量避免使用 *=， |=， ^=， $=， 和 ~=文法的屬性選取器。