CSS 优化主要是四个方面:
- 加载性能
比如不要用 @import 等等,@import会影响css文件的加载速度,考虑加载性能时,主要是从减少文件体积、减少阻塞加载、提高并发方面入手,任何 hint 都逃不出这几个大方向。 - 选择器性能
selector 对整体性能的影响现如今其实可以忽略不计了,selector 的考察更多是规范化和可维护性、健壮性方面,很少有人在实际工作当中会把选择器性能作为重点关注对象的,但知道总比不知道好,(合理选用选择器,没必要用id选择器的情况下,尽量少用)。 - 渲染性能
渲染性能是 CSS 优化最重要的关注对象。页面渲染 junky 过多?看看是不是大量使用了 text-shadow?是不是开了字体抗锯齿?CSS 动画怎么实现的?(对于一些复杂,看似炫酷,却毫无意义的动画特效,可考虑砍掉不写),合理利用 GPU 加速了吗(合理使用cache进行渲染)。 - 可维护性
命名合理吗?结构层次设计是否足够健壮?(一般嵌套不要超过5层),对样式进行复用了吗?优雅的 CSS 不仅仅会影响后期的维护成本,也会对加载性能等方面产生影响。