CSS效能分析，如何優化CSS提高效能

不負十年後的自己，共勉！

前端效能最佳化一直是個比較熱門的話題，我們總是在盡我們最大的努力去，提高我們的頁面效能，例如減少HTTP請求，利用工具對資源進行合併壓縮，腳本置底，避免重複請求，css sprite等等。其實大量的方法都是在減少檔案大小，減少請求，優化JS，很少有人對css十分關注，甚至有人都不對css進行壓縮。

其實，不規範的css會導致很多效能問題，這些問題可能在一些小的專案中不夠明顯，但是在大型專案中就會顯現出來。

css匹配原理

在優化css之前我們需要了解下css是怎麼進行工作的，我們都知道css是由選擇器，屬性和屬性值構成的。

我們可能會這樣寫上一行程式碼

<span style="color: #000000;">//css
.con .loulan1 p span{ display: block; }

//html
</span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

在這裡我們將con類別裡面的loulan類別裡的p標籤裡面的span標籤進行樣式定義。我說出來都嫌累更別說寫起來了，其實你可以把瀏覽器看成一個人，它渲染起來一定也會浪費效能。

而且css的匹配原理不是從左到右的，而是從右到左的，也就是說我們的這行程式碼裡面，先查找到頁裡面所有的span元素形成一個集合，再在所有的span元素往上查找，看看有多span的父元素是p元素或父元素的父元素是p元素或......慢慢尋找，把父元素不是p元素的刪去，再往上找看集合裡的有p元素又多少它的父元素的類別是loulan...瀏覽器說：我好累...

其實呢瀏覽器從右到左進行查找的好處是為了儘早過濾掉一些無關的樣式規則和元素。而Firefox 稱這種查找方式為 keyselector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最後(最右邊)的規則，上面的 key 是 span。人家本來是為了能盡快過濾到一些無關樣式規則的，我們這裡缺一層套一層，層層不停歇。所以只是想定義一個span的樣式在span上加個類豈不是更好。有人這時要說了，那樣是需要在每個元素上都加上類別嗎？那肯定不是必須的，只不過我們要了解瀏覽器是怎麼查找匹配的，然後結合現在的結構來做出一​​個最好的最方便的寫法。

<span style="color: #000000;">//css
.loulanSpan{ display: block; }

//html
</span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="con"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulan"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="loulanSpan"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span>

css選擇器權值

這裡說下CSS的 ID Class Tag選擇器的權值，也就是他們的優先權，權值越大，優先權越高

ID:100

Class:10

Tag:1

 

有了上面兩個的基礎我們再詳細說下應該怎樣來優化css提高性能

 

1，減少css嵌套，最好不要套三層以上，一般情況下塊級元素加上類，裡面的內聯元素不用加，css寫的時候塊級class套內聯tag，這樣不僅可以減少css檔案大小，還能減少效能浪費。

2，不要在ID選擇器前面進行嵌套，ID本來就是唯一的而且人家權值那麼大，前方嵌套完全是浪費性能。

3，建立公共樣式類，把長段相同樣式提取出來作為公共類使用，比如我們常用的清除浮動，單行超出顯示省略號等等等，當然如果你使用sass，繼承會讓你更加方便，同時我是比較提倡使用sass的，之後一定也會寫一篇sass的部落格。

4，縮寫css，其中包括縮寫maigin，padding，顏色值等等，如果有兩個或兩個以上的margin-****，寫成margin: * * * *有助於檔案大小。

5，減少通配符*或類似[hidden="true"]這類選擇器的使用，挨個查找所有...這性能能好嗎？當然重置樣式這些必須的東西是不能少的。

6，有些人喜歡在類別名稱前面加上標籤名稱：p.ty_p 來進行更精確的定位，但是這樣往往效率更差，類別名稱應該在全域範圍除非公用是唯一的，所以這種做法是應該便麵的。

7，巧妙運用css的繼承機制，在css中很多屬性是可以繼承的例如顏色字體等等，父節點定義了，子節點就無需定義。

8，拆分出公共css文件，對於比較大的項目我們可以將大部分頁​​面的公共結構的樣式提取出來放到單獨css文件裡，這樣一次下載後就放到緩存裡，當然這種做法會增加請求，具體做法應以實際情況而定。

9，不用css表達式，可能大家接觸比較少，但是要記住的是無論我們怎麼酷炫，到了最後都是靜態的，所以表達式只是讓你的程式碼顯得更加酷炫，但是他對效能的浪費可能是超乎你的想像的，因為它不只是計算一次，一些小的事件可能會增加它為了有效準確而進行計算求值的次數。

10，少用css rest，可能你會覺得重置樣式是規範，但其實其中有很多的操作是不必要不友善的，有需求有興趣的朋友可以選擇normolize.css

11，cssSprite，合成所有icon圖片，用寬高加上bacgroud-position的背景圖方式顯現出我們要的icon圖，這是一種十分實用的技巧，極大減少了http請求。

 

當然我們還需要一些善後工作，CSS壓縮(這裡提供一個在線壓縮 YUI Compressor ，當然你會用其他工具來壓縮是十分好的)，GZIP壓縮，Gzip是一種流行的文件壓縮算法，詳細做法可以谷歌或者百度。

 

當然css性能優化技術可能不只是這些，歡迎朋友補充分享。