最佳化你的CSS

系列概述

在移動web興起的年代，速度最佳化重新被大家重視起來，因為手機的網路環境和效能比PC端差了很多，估計大家也能感覺到用手機開啟網頁的時候，能明顯感覺到頁面蝸牛般的速度。

這個系列的最佳化會以移動環境為基礎，當然絕大多數規則也同樣適合PC端。

最佳化的基本原則

速度最佳化有一些基本思路，提前總結一下

• 按需載入(只加載你需要的)

• 並行(讓序列的事情並行起來)

• 壓縮(透過壓縮減少體積)

• 快取(利用快取，減少請求等待)

• 預測(預測使用者行為，提前發出請求)

• 合併(把多個零散檔案合併起來，減少請求)

• 自動化(讓速度最佳化變成一種常規，和自動化工具(例如gulp,grunt,fis)結合，減少成本)

進入正題，最佳化你的css

為什麼第一篇講css，因為css是最難最佳化的，圖片和js你都可以延遲載入，而css不可以，你必須在dom前面載入css，你必須接受css阻塞dom渲染的現實。

css最佳化之壓縮(cssshrink)

我們一般都會對css進行常規壓縮，主要做去空格和換行的工作。這裡推薦的cssshrink會做更精細的工作，cssshrink會首先透過css parser對css進行解析，然後有針對性的進行最佳化。例如會吧0px和0%轉換成0，bold轉換成700，字元級別的極致壓縮，為作者點個贊。

• cssshrink具體的最佳化策略，http://cssshrink.com/velocity

• cssshrink：GitHub地址，https://github.com/stoyan/cssshrink

css最佳化之合併

• 使用gulp-concat將多個css合併在一起

• 不要使用@import 減少阻塞和請求

css拆分

看起來和上面有些衝突，這也是css和其它部分最佳化不同的地方。 一般我們大家都習慣把css放在最上面，js放在最下麵。這是一個好習慣，但是對於css來說並不是最好的選擇。

在移動端，大家非常重視首屏時間，也就是使用者看到頁面的時間。把整個頁面的css都放在最上面，大量首屏用不到的css會阻塞首屏的展現。

• head只放首屏能用到的css，首屏外的css下移

css使用率

一般頁面經過多人維護後，會產生大量用不到css，大家也不敢隨意刪除，這就需要一些檢測工具

1. unu

1.1 unu是一個用來檢測頁面哪些css沒有用到的Node.js模組

1.2 優點：提供視覺化介面,使用非常簡單，輸入url，即可檢視頁面css的使用情況

1.3 缺點：目前只支援style標簽式的css，另外沒有執行頁面的js

2. uncss

2.1 uncss是可以把頁面css沒有用到去除的模組

2.2 優點：支援命令列和gulp、grunt外掛，支援link方式，基於phantomjs，模擬瀏覽器執行，支援js執行

2.3 缺點：僅憑一個url匯出的css，不具有實際價值，另外不支援style標簽

3. critical

3.1 critical是一個用來檢測首屏css有哪些沒用到的模組

3.2優點：可以輸入首屏寬高來檢測、有gulp、grunt外掛

3.3 缺點：不支援url，只支援本地html，不支援style標簽

總結

速度最佳化對於開發人員來說是件降低生產力的事情，所以需要盡可能的自動化，設定好規則，無痛最佳化，同時避免後續惡化。

原文出處： 百度MWEB（@mdemo）