css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑,同时还要注意css代码的加载顺序
实现方式
- 内联首屏关键CSS
- 异步加载CSS
- 资源压缩
- 合理使用选择器
选择器优化嵌套,尽量避免层级过深
- 减少使用昂贵的属性
在页面发生重绘的时候,昂贵属性如box-shadow/border-radius/filter/透明度/:nth-child等,会降低浏览器的渲染性能
- 不要使用@import
@import会影响浏览器的并行下载,使得页面在加载时增加额外的延迟,增添了额外的往返耗时
而且多个@import可能会导致下载顺序紊乱
- 减少重排操作,以及减少不必要的重绘
- 了解哪些属性可以继承而来,避免对这些属性重复编写
- cssSprite,合成所有icon图片,用宽高加上backgroud-position的背景图方式显现出我们要的icon图,减少了http请求
- 把小的icon图片转成base64编码
- CSS3动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top属性
- 避免使用CSS表达式
- 移除空的css规则
- 抽象提取公共样式,减少代码量
- 属性值为0时,不加单位
- 属性值为小于1的小数时,省略小数点前面的0