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的元素，直到文檔的根節點。

避免類正則的屬性選擇器

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com