怎么优化css
优化的基本原则
速度优化有一些基本思路，提前总结一下
-
按需加载(只加载你需要的)
-
并行(让串行的事情并行起来)
-
压缩(通过压缩减少体积)
-
缓存(利用缓存，减少请求等待)
-
预测(预测用户行为，提前发出请求)
-
合并(把多个零散文件合并起来，减少请求)
-
自动化(让速度优化变成一种常规，和自动化工具(例如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具体的优化策略，http://cssshrink.com/velocity
-
cssshrink：GitHub地址，https://github.com/stoyan/cssshrink
css优化之合并
-
使用gulp-concat将多个css合并在一起
-
不要使用@import 减少阻塞和请求
css拆分
看起来和上面有些冲突，这也是css和其它部分优化不同的地方。 Java编程人员需注意。一般我们大家都习惯把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
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标签
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
