前端性能优化十三：提升CSS渲染性能

1. 提升CSS渲染性能:

①. 谨慎使用expensive属性:
    a. 如:nth-child伪元素
    b. position:fixed、absolute等
    c. 这些是比较耗费浏览器的性能

②. 减少样式层级数:
    a. div ul li span i {color: bule}  =>  直接给i添加一个class
    b. 减少浏览器对css的查询

③. 尽量避免使用占用CPU和内存的属性:
    a. 如:text-indent: -99999px(文字缩进）
       (1). 值比较大
       (2). text-indent比较耗费CPU

④. 尽量避免使用耗电量大的属性,使用到GPU加速的:
    a. 如css3 transforms、 css3 transitions、Opacity

---

2. 合适使用css选择器:

①. 尽量避免使用css表达式:
    a. 如background-color: expression((new Date()).getHours()%2 ? '#FFF': '#000');

②. 尽量避免使用通配选择器:
    a. 如body > a { font-weight: bold; }
       (1). 在body中可能有很多元素,需要在body所有元素中寻找这个选择器a,非常耗费性能.

③. 尽量避免类正则的属性选择器:
    a. 如*=、|=、^=、$=

---

3. 提升css文件加载的性能:

①. 使用外链的css:
    a. 内联的css是放在html文件中,不如用外链.
    b. 外链的css文件可以放在cdn上,每次访问都有缓存,可以减少HTML页面体积的大小.

②. 尽量避免使用@import:
    a. 在css文件中使用@import,会在加载css的时,需要将这些文件都加载进来.  =>  串行加载
    b. 在外部引入css的话,浏览器支持并行下载.
    c. 所以,使用@import会阻塞到css的加载,也会影响到js的加载.

---

4. 精简css代码:

①. 使用缩写语句:
    a. 如margin-left、margin-right等,可以直接放在margin中设置.

②. 删除不必要的0:
    a. 0.2em => 0可以删除

③. 删除不必要的单位:
    a. 比如margin: 0px 0px 0px 10px  =>  这里的0后面的px可以删除

④. 删除过多的分号:

⑤. 删除空格和注释:
    a. 可以借助压缩工具来处理.

⑥. 16进制颜色代码缩写:
    a. color: #eebbcc;  => #ebc;

⑦. 总结:
    a. 尽量减少样式表的大小
    b. 精简css代码

---

5. 合理使用web fonts:

①. 将web fonts的字体文件部署到cdn上.

②. 将字体以base64的形式保存在css中并通过localstorage进行缓存.

③. Google字体库因为某些不可抗拒的原因了,应该使用国内托管服务.

---

6. css动画优化:

①. 尽量避免同时动画:
    a. 在一个用户访问屏幕的这个区间里面不要有过多的动画.
    b. 动画太多首先会打乱用户预览网站的节奏.
    c. 其次是影响浏览器的性能.

②. 延迟动画的初始化:
    a. 可以先保证其他css正常的渲染,而动画可以延迟0.5 ～ 1秒才开始.

③. 结合svg:
    a. 因为svg是矢量的,可以把动画放到svg中展示.
    b. 其它的样式放到css中控制.