摘要：

    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來處理你的圖片

 

小結：

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