CSS性能优化

CSS最耗费性能的无疑是动画效果,

其中包含border-radius(圆角) box-shadows(阴影) transparency(透明色) transforms(变形) filters(滤镜)

动画效果的优化利用硬件能力.开启GPU加速 利用translate3d实现动画位移.而非简单的top left等

CSS选择器的问题

首先css的解析是从右往左的,在我们编写代码时如果从子层级开始到一定的父层级可以锁定一个元素时.尽量不要再写过多的嵌套

1,尽量不使用通配符选择器

2,尽量不使用标签选择器

3,适当的使用继承性,避免重复渲染属性

正确的使用Display

display: inline后不应该再使用 width、height、margin、padding 以及 float；

display: inline-block 后不应该再使用 float；

display: block 后不应该再使用 vertical-align；

display: table-* 后不应该再使用 margin 或者 float；