優化你的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合併在一起

不要使用

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

不要使用@import 減少阻塞和拆包分

看起來和上面有些衝突，這也是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標籤

總結

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