系列概述
在行動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標籤
總結
速度優化對於開發人員來說是件降低生產力的事情，所以需要盡可能的自動化，設定好規則，無痛優化，同時避免後續惡化。
