優化你的css

優化你的css，是優化你的xxx系列的第一篇，後續會推出多篇，歡迎你們來關注移動雲前端小組獲取最新文章。

系列概述

在移動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，你們也不敢隨意刪除，這就須要一些檢測工具

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標籤

總結

速度優化對於開發人員來講是件下降生產力的事情，因此須要儘量的自動化，設置好規則，無痛優化，同時避免後續惡化。

有任何問題，歡迎微博交流