优化你的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标签

总结

速度优化对于开发人员来讲是件下降生产力的事情，因此须要尽量的自动化，设置好规则，无痛优化，同时避免后续恶化。

有任何问题，欢迎微博交流