最佳化你的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具體的最佳化策略，點此查看

cssshrink：GitHub地址

css最佳化之合并

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

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

css拆分

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

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

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

css使用率

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

unu
1.1 unu是一個用來檢測頁面哪些css沒有用到的Node.js模組
1.2 優點：提供可視化介面,使用非常簡單，輸入url，即可查看頁面css的使用方式
1.3 缺點：目前只支援style標籤式的css，另外沒有執行頁面的js

uncss
2.1 uncss是可以把頁面css沒有用到去除的模組
2.2 優點：支援命令列和gulp、grunt外掛程式，支援link方式，基於phantomjs，類比瀏覽器執行，支援js執行
2.3 缺點：僅憑一個url匯出的css，不具有實際價值，另外不支援style標籤

critical
3.1 critical是一個用來檢測首屏css有哪些沒用到的模組
3.2優點：可以輸入首屏寬高來檢測、有gulp、grunt外掛程式
3.3 缺點：不支援url，只支援本地html，不支援style標籤

總結

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

