css 渲染优化的方式

1、加载性能优化：css压缩、css单一样式、减少使用 @import, 而建议使用link；

2、 选择器性能优化：

• 避免使用通配规则 *
• 尽量少的去对标签进行选择，而是用class
• 不要去用标签限定ID或者类选择符：ul#nav,应该简化为#nav
• 尽量少的去使用后代选择器，降低选择器的权重值
• 考虑继承

3、渲染性能优化：

• 尽量减少页面重排、重绘；
  关于：contain属性优化，可查看 https://developer.mozilla.org/zh-CN/docs/Web/CSS/contain   、https://www.cnblogs.com/xiaonian8/p/14932371.html
• 重排按照css的书写顺序：

　　位置：positon、top、left、z-index、float、display

　　大小：width、height、margin、padding

　　文字系列： font、line-height、color、letter-spacing

　　背景边框：background、 border

　　其它：anmation、transition

　　重绘：border、outline、background、box-shadow，能使用background-color，就尽量不要使用background;

• 去除空规则：｛｝；
• 属性值为0时，不加单位；
• 属性值为浮动小数0.**，可以省略小数点之前的0；
• 准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
• 不使用@import前缀，它会影响css的加载速度；
• 充分利用css继承属性，减少代码量；
• 抽象提取公共样式，减少代码量；
• 选择器优化嵌套，尽量避免层级过深；
• css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
• 将css文件放在页面最上面

4、可维护性、健壮性

• 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；
• 继上一条，oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，例如：class="btn btn-active btn-blue"；
• 样式与内容分离：将css代码定义到外部css中；
• 容器与样式分离；