1. 提升CSS渲染性能:

复制 1①. 谨慎使用expensive属性:
 2    a. 如:nth-child伪元素
 3    b. position:fixed、absolute等
 4    c. 这些是比较耗费浏览器的性能
 5
 6②. 减少样式层级数:
 7    a. div ul li span i {color: bule}  =>  直接给i添加一个class
 8    b. 减少浏览器对css的查询
 9
10③. 尽量避免使用占用CPU和内存的属性:
11    a. 如:text-indent: -99999px(文字缩进）
12       (1). 值比较大
13       (2). text-indent比较耗费CPU
14
15④. 尽量避免使用耗电量大的属性,使用到GPU加速的:
16    a. 如css3 transforms、 css3 transitions、Opacity

---

2. 合适使用css选择器:

复制 1①. 尽量避免使用css表达式:
 2    a. 如background-color: expression((new Date()).getHours()%2 ? '#FFF': '#000');
 3
 4②. 尽量避免使用通配选择器:
 5    a. 如body > a { font-weight: bold; }
 6       (1). 在body中可能有很多元素,需要在body所有元素中寻找这个选择器a,非常耗费性能.
 7
 8③. 尽量避免类正则的属性选择器:
 9    a. 如*=、|=、^=、$=

---

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

复制 1①. 使用外链的css:
 2    a. 内联的css是放在html文件中,不如用外链.
 3    b. 外链的css文件可以放在cdn上,每次访问都有缓存,可以减少HTML页面体积的大小.
 4
 5②. 尽量避免使用@import:
 6    a. 在css文件中使用@import,会在加载css的时,需要将这些文件都加载进来.  =>  串行加载
 7    b. 在外部引入css的话,浏览器支持并行下载.
 8    c. 所以,使用@import会阻塞到css的加载,也会影响到js的加载.

---

4. 精简css代码:

复制 1①. 使用缩写语句:
 2    a. 如margin-left、margin-right等,可以直接放在margin中设置.
 3
 4②. 删除不必要的0:
 5    a. 0.2em => 0可以删除
 6
 7③. 删除不必要的单位:
 8    a. 比如margin: 0px 0px 0px 10px  =>  这里的0后面的px可以删除
 9
10④. 删除过多的分号:
11
12⑤. 删除空格和注释:
13    a. 可以借助压缩工具来处理.
14
15⑥. 16进制颜色代码缩写:
16    a. color: #eebbcc;  => #ebc;
17
18⑦. 总结:
19    a. 尽量减少样式表的大小
20    b. 精简css代码

---

5. 合理使用web fonts:

复制 1①. 将web fonts的字体文件部署到cdn上.
 2
 3②. 将字体以base64的形式保存在css中并通过localstorage进行缓存.
 4
 5③. Google字体库因为某些不可抗拒的原因了,应该使用国内托管服务.

---

6. css动画优化:

复制 1①. 尽量避免同时动画:
 2    a. 在一个用户访问屏幕的这个区间里面不要有过多的动画.
 3    b. 动画太多首先会打乱用户预览网站的节奏.
 4    c. 其次是影响浏览器的性能.
 5
 6②. 延迟动画的初始化:
 7    a. 可以先保证其他css正常的渲染,而动画可以延迟0.5 ～ 1秒才开始.
 8
 9③. 结合svg:
10    a. 因为svg是矢量的,可以把动画放到svg中展示.
11    b. 其它的样式放到css中控制.