CSS优化

一、优化方法

1、加载性能相关（CSS的加载不会阻塞DOM树的解析，但是会阻塞DOM树的渲染，所以css最好放到head头部引入）

　　a. 不要用 @import ，阻塞DOM的解析，和script的加载一样
　　b. 合并压缩（主要是从减少文件体积、减少阻塞加载、提高并发方面入手的）
　　c. 雪碧图（css sprites），减少http请求
　　d. DNS预解析提升页面速度
　　　　1). 用meta信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
　　　　2). 在页面header中使用link标签来强制对DNS预解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

　　注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。

　　浏览器对网站第一次的域名DNS解析查找流程依次为：

　　　　浏览器缓存 - 系统缓存 - 路由器缓存 - ISP DNS缓存 - 递归搜索

2、选择器性能

　　a. 避免在css中使用ID选择器；
　　b. 避免过多嵌套选择器；

3、渲染性能渲染性能是 CSS 优化最重要的关注对象。

　　1). 是不是开了字体抗锯齿？
　　　　-webkit-font-smoothing主要有一下三个属性：
　　　　none: 无抗锯齿
　　　　subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows
　　　　antialiased: 灰度平滑 常用于Android和iOS等移动设备的

　　2). CSS 动画怎么实现的？合理利用 GPU 加速了吗？

　　　　为动画DOM元素添加CSS3样式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);
　　　　这两个属性都会开启GPU硬件加速模式，从而让浏览器在渲染动画时从CPU转向GPU。

　　开启GPU硬件加速可能触发的问题：

　　通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之：

　　-webkit-backface-visibility:hidden;
　　-webkit-perspective:1000;

4、可维护性

　　a. 命名是否足够强壮合理
　　b. 结构层次设计是否足够健壮
　　c. 对样式进行抽象复用
　　d. 了解过OOCSS
　　优雅的 CSS 不仅仅会影响后期的维护成本，也会对加载性能等方面产生影响。