Css相关优化
一.提升css渲染性能
- 谨慎使用expensive属性
例如: nth-child伪类; position:fixed定位
- 尽量减少样式层级数
如: div ul li span i {color: blue;}
- 尽量避免使用占用过多cpu和内存的属性
如text-indent: -99999px
- 尽量避免使用耗电量大的属性
如css3 3d transforms, css3 transitions, opacity
二.合适使用css选择器
- 尽量避免使用css表达式
- 尽量避免使用通配选择器
- 尽量避免使用正则的属性选择器
三.提升css文件加载性能
- 使用外链css
- 尽量避免使用@import
四.精简css代码
- 使用缩写语句
- 删除不必要的0
- 删除不必要的单位,如px
- 删除过多分号
- 删除空格和注释
- 尽量减少样式表的大小
五.合理使用web fonts
- 将字体部署在cdn上
- 将字体以base64形式保存在css中并通过localStorage进行缓存
- Google字体库应该使用国内托管服务
六.动画优化
- 尽量避免同时动画
- 延迟动画初始化
- 结合svg
- 使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。