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

避免使用@import

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

一個CSS檔案first.css包含了以下內容：@import url(“second.css”)。瀏覽器先把first.css下載、解析、執行後，發現並處理第二個檔案second.css。簡單的 解決方法是使用標記來替代@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的元素，直到文檔的根節點。

避免類別正規的屬性選擇器

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

以上是CSS解讀前端效能優化的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！