CSS效能最佳化，css最佳化

CSS效能最佳化，css最佳化
摘要：

    CSS是負責布局和渲染的重要角色，漂亮的頁面當然能夠吸引使用者。本文是自己在開發過程中總結的關於CSS與效能的關係，可能有不對之處，希望能夠指出。

1、所有的樣式盡量放在css檔案中，HTML標籤中不要寫style屬性，因為瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，寫在標籤屬性必會加長瀏覽器的渲染時間

2、刪除預設樣式代碼

因為會影響瀏覽器的執行時間。如：align="left"，預設就是靠左對齊

3、減少使用相對定位

因為這會影響瀏覽器的repain和reflow。如：position：absolute

4、CSS 縮寫

CSS 縮寫可以讓你用極少的代碼定義一系列樣式屬性，這種做法可以極大程度的縮減代碼量以達到提高效能的目的。如：#ff00ff替換成#f0f

5、對CSS屬性進行合并

屬性合并減少代碼量和瀏覽器的渲染時間以達到提高效能的目的。如：font-size: 36px; font-family: Arial; line-height: 48px; font-weight: bold;替換成font:bold 36px/48px Arial;

6、CSS選取器

• 瀏覽器是“從右往左”來分析 class 的，它的匹配規則是從右向左來進行匹配的，因此最右邊的選擇符就是關鍵選擇符。比如：#parent > a {}與#parent a {}，前者瀏覽器首先會尋找頁面上所有的“a”節點，然後再去做進一步的判斷：如果它的父節點的 id 為“parent”，則匹配成功。後者瀏覽器先便利所有的“a”節點，然後步步上溯其父節點，直到 DOM 結構的根節點（document），如果有某個節點的 id 為“parent”，則匹配成功，否則繼續尋找下一個“a”節點。

 

• 盡量減少規則數量，規則越多，匹配越慢

• 減少屬性選取器

7、避免使用 CSS運算式

CSS運算式只有ie瀏覽器可以執行，但是計算次數比較頻繁，不僅頁面渲染和改變大小 (resize) 時會執行，頁面滾動 (scroll) 時也會執行，甚至連滑鼠在頁面上滑動時都會執行。

8、利用繼承機制，減少CSS

如果很多子節點都需要設定該 CSS 屬性值，可以統一設定其父節點的該 CSS 屬性，這樣一來，所有的子節點再無需做額外設定，加速了 CSS 的分析效率。

9、樣式放在HTML頁面頭部載入

瀏覽器在所有的樣式載入完成之後，才會開始渲染整個頁面，在此之前，瀏覽器不會渲染頁面裡的任何內容，頁面會一直呈現空白。

10、避免使用濾鏡

IE 特有的 AlphaImageLoader filter 是為瞭解決 IE6 及以前版本不支援半透明的 PNG 圖片而存在的。但是瀏覽器在下載 filter 裡面的圖片時會“凍結”瀏覽器，停止渲染頁面。同時 filter 也會增大記憶體消耗。最不能忍受的是 filter 樣式在每個頁面元素（使用到該 filter 樣式）渲染時都會被瀏覽器分析一次，而不是像一般的背景圖片渲染模式：使用過該背景圖片的所有元素都是被瀏覽器一次性渲染的。針對這種情況，最好的解決辦法就是使用 PNG8。

11、利用data:image/png;base64來代替url載入圖片

"data"類型的Url格式，是在RFC2397中 提出的，目的對於一些“小”的資料，可以在網頁中直接嵌入，而不是從外部檔案載入。

12、減少重複的樣式，多人開發時會出現多個人定義同一個樣式，可以藉助瀏覽器檢測

13、合并、壓縮你的css檔案，減少http請求，可以藉助工具或者自動化構建。

14、使用CSS sprite來處理你的圖片

 

小結：

　　 現在項目中越來越重視使用者體驗，在這種情況下我們必須寫出高效能的代碼，減少使用者等待時間是我們第一要解決的問題。

css 性可以最佳化

不是，etags 是伺服器給每一個資源賦予的id標識；

當瀏覽器的檔案（片）等etag跟伺服器上的etag沒有區別時，表示檔案沒有更改，不用請求新的資源；

簡單點理解，就是你的伺服器沒有開啟靜態資源緩衝。。。
 
CSS的最佳化

.div1{
width:100px;height:200px;
background:url(111.gif) no-repeat;
border:1px solid #000;
}

.div2{
width:100px;height:500px;
background:url(222.gif) no-repeat;
border:1px solid #000;
}

把上面這段改成下面這段：

.div1{
height:200px;
background:url(111.gif) no-repeat;
}

.div2{
height:500px;
background:url(222.gif) no-repeat;
}

.div_w_br{
width:10px;border:1px solid #000;
}

就是這個意思，細節上非千言萬語講不完，原理就是把一些有共性的東西寫在一起，代碼多了就可以節約css檔案大小，任何東西都有兩面性的，最佳化多了在可讀性上面又犧牲不少，可能搞得你自己寫的樣式隔上個星期你自己都要看半天才懂!還有些用javascript指令碼做的小程式，可在線壓縮css檔案代碼的，也是這個原理，你可以搜尋一下：css在線壓縮、css線上最佳化