CSS 效能最佳化技巧

文章目錄

• 1. 合理使用 CSS Sprite 和 DataURI
• 2. 壓縮 CSS 與使用簡碼書寫 CSS
• 3. 使用效率更高的選取器
• 4. 避免使用濾鏡和運算式

作為指導瀏覽器如何渲染頁面樣式的部分，CSS 的效能對頁面整體效能的影響是巨大的。在這篇文章中，我們共同來討論如何對 CSS 進行最佳化，實際上，其中所有的手法都並不複雜，關鍵在於多在實戰中實施，並深刻瞭解最佳化與未經最佳化的差異。另外，在這個過程中合理利用一些工具能夠對我們 產生莫大的協助。Google 的 Page Speed和 Yahoo 的YSlow都是不錯的選擇，兩者均是基於 Firebug 的外掛程式。在這篇文章中，我們主要使用到的是 Page Speed 進行示範。

1. 合理使用 CSS Sprite 和 DataURI

CSS Sprite 相信大家已經非常熟悉了，把 CSS 中用作背景的圖片拼合成一張圖，然後通過 background-position 來設定顯示的具體位置。這種手法對於減少 HTTP 要求數非常地見效，但是並不是所有的圖片都適合做成 Sprite，例如一個需要平鋪的背景。另外，CSS Sprite 的另一個問題是難以維護與更新，試想修改一堆小圖拼成的大圖，肯定比修改單個小圖片費勁得多，所以在拼合成大圖前，精心的設計是不可缺少的一個環節。DataURI是一種將小檔案嵌入文檔的方案，一個例子如下：

    body {            background: url(data:image/gif;base64,gif圖片編碼);    }

DataURI 的主要目的同樣是為了減少 HTTP 要求數量，但事實上使用這項技術需要非常的謹慎，DataURI 有足夠的缺點讓開發人員放棄它，首先，瀏覽器需要較普通圖片數倍數十倍的開銷將編碼轉成圖片並呈現出來；其次，編碼的圖片無法被重複使用，這意味著在一個頁 面中，想要多次使用該圖片，就需要將編碼多次copy；最後，上面的方式對於 IE6/7 並不適用，為了全面相容，需要為他們添加 Hack，這意味著需要雙倍的代碼量，真是得不償失。

2. 壓縮 CSS 與使用簡碼書寫 CSS

這兩個技巧的目的在於使 CSS 檔案變得更小。壓縮 CSS 是去掉對開發人員有用而對瀏覽器無用的空格符，甚至是分行符號，對於此項工作，推薦使用 YUI 的 Compressor，這是一個命令列模式的 JAVA 小程式，適合於將其添加到你的自動部署流程中。它的使用非常的簡單，下面的一行命令列將壓縮 a.css 並輸出到 a.min.css

    java -jar yuicompressor.jar a.css -o a.min.css

事實上 YUI compressor 真正強大的地方在於對 javascript 的壓縮，有興趣的朋友可以去看看文檔。下面這張圖片展示了壓縮前的 a.css 和壓縮後的 a.min.css 的對比，可以看到，YUI compressor 去掉了所有不需要的空格符和分行符號，壓縮率約為 37%（視情況而定）

有的朋友可能因為種種原因，並不具備自動化部署的條件，那麼使用 YUI compressor 可能就稍顯麻煩了，這種情況推薦使用前面說到的 Page Speed，如果你的 CSS 檔案未經壓縮，Page Speed 將會在 minify css 項給出一個紅色的警告，展開選項，可以看到 Google 已經為你準備好了壓縮版本，可以選擇查看或者另存，非常的方便。（如）

關於 CSS 簡碼的書寫，則非常簡單了，非常多的屬性都可以使用簡寫來表示，如果這種寫法成為習慣，你會發現減小 CSS 檔案大小是多麼順其自然的事:

    body {        background:url(images/bg.png) repeat #369 center center;        padding:5px 10px;        margin:5px 10px;        font:bold 18px Arial;        border:1px solid #ccc;    }

3. 使用效率更高的選取器

很多開發人員都有 HTML 潔癖，甚至不願意給元素標記更多的 id 或 class，但這帶來的副作用就是在 css 中使用的選取器過於複雜：

    #nav li a {...}    #footerWrapper #footer .column p {...}    ul > li > a {...}    form#login {...}

上面的例子都是效率比較低下的選取器，大量使用低效選取器將會對頁面渲染造成效能影響。事實上，Google 推薦我們使用更為簡潔的選取器，用 id 或 class 直接指向元素，後代選取器當然是非常好用的，但是最好不要超過2層。如果你使用的選取器有不合乎 Google 推薦的情況，在 Page Speed 中會有具體的提示，展開 Use efficient CSS selectors 項，每一個低效的選取器都被按嚴重程度羅列出來。

4. 避免使用濾鏡和運算式

這一條是僅針對 IE 而言，IE 瀏覽器可以解釋 CSS 中的 filter 和 expression ，儘管它們在有的時候非常有用，但是副作用也是不得不考慮的。例如，當我們使用 filter 引用一個透明 png 圖片時，這個圖片的載入會阻塞瀏覽器，此時瀏覽器不會做其他任何操作，包括載入其他資源和渲染頁面；另外，當這個 png 圖片被載入之後，無法像其他圖片一樣被緩衝，這意味著每次頁面的重新整理都會重新請求並下載該圖片。而使用 expression 會大大降低渲染頁面的效率也是眾所周知的事情。最後多說一句， expression 對於 IE8 來說，只在相容模式(compatibility mode)下有效。