前端优化——css渲染性能

一.提升css渲染性能
1. 谨慎使用expensive属性
      例如: nth-child伪类; position:fixed定位
2. 尽量减少样式层级数
      如: div ul li span i {color: blue;}
3. 尽量避免使用占用过多cpu和内存的属性
      如text-indent: -99999px
4. 尽量避免使用耗电量大的属性
      如css3 3d transforms, css3 transitions, opacity 

二.合适使用css选择器

1. 尽量避免使用css表达式
2. 尽量避免使用通配选择器
3. 尽量避免使用正则的属性选择器

三.提升css文件加载性能
 
1. 使用外链css
2. 尽量避免使用@import  

四.精简css代码

1. 使用缩写语句
2. 删除不必要的
3. 删除不必要的单位,如px
4. 删除过多分号
5. 删除空格和注释
6. 尽量减少样式表的大小

五.合理使用web fonts

1. 将字体部署在cdn上
2. 将字体以base64形式保存在css中并通过localStorage进行缓存
3. Google字体库应该使用国内托管服务

六.动画优化

1. 尽量避免同时动画
2. 延迟动画初始化
3. 结合svg
4. 使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。