CSS：CSS的优化

提升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中展示