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中;
- 容器与样式分离;