提升css渲染性能
- 谨慎使用expensive属性
比如nth-child伪元素，position: fixed, position: absolute等，因为这些是比较耗费浏览器的性能的 - 减少样式层级数
- 尽量避免使用占用CPU和内存的属性。
比如：text-indent: -99999px(文字缩进）
首先这个值比较大，其次text-indent 就是比较耗费CPU - 尽量避免使用耗电量大的属性，使用到GPU加速的
如css3 transforms、 css3 transitions、Opacity
合适使用css选择器
- 尽量避免使用css表达式
比如 background-color: expression((new Date()).getHours()%2 ? '#FFF': '#000'); - 尽量避免使用通配选择器
比如 body > a { font-weight: bold; }
因为body里面可能有很多元素，这个选择器需要在body里面找到所有的元素，并从中选出a，非常耗费性能 - 尽量避免类正则的属性选择器
比如 *= ， |= ， ^=， $=
提升css文件加载的性能
- 使用外链的css
内联的css是放在html文件里面，不如用外链。外链的css文件可以放在cdn上，每次访问都有缓存。可以减少HTML页面体积的大小。 - 尽量避免使用@import
在css文件中使用@import的话，在加载css的时候，需要将这些文件都加载进来。也就是串行加载。而在外部引入css的话，浏览器支持并行下载。所以使用@import会阻塞到css的加载，也会影响到js的加载。
精简css的代码
- 使用缩写语句
比如margin-left和margin-right等可以放在margin里面设置。 - 删除不必要的0
- 删除不必要的单位，比如px
- 删除过多的分号
- 删除空格和注释
- 尽量减少样式表的大小
合理使用web fonts
- 将web fonts的字体文件部署到cdn上
- 将字体以base64的形式保存在css中并通过localstorage进行缓存
- Google字体库因为某些不可抗拒的原因了，应该使用国内托管服务。
css动画优化
- 尽量避免同时动画
在一个用户访问屏幕的这个区间里面不要有过多的动画，动画太多首先会打乱用户预览网站的节奏，其次是影响浏览器的性能 - 延迟动画的初始化
可以先保证其他css正常的渲染，而动画可以延迟0.5～1秒才开始 - 结合svg
因为svg是矢量的，可以把动画放到svg中展示
