CSS 优化
本文讲述在实际工作中如何优化 CSS，提升页面加载的性能！
避免使用 @import
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");
由于 @import 属性允许相互之间嵌套引入，因此浏览器必须串行的去下载每一个 @import 引入的文件，因此会增加下载 CSS 文件的时间，而使用 <link> 就可以并行下载 CSS 文件，可有效提升 CSS 加载的性能：
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">
简化 CSS 选择器
浏览器是从右向左逐步解析选择器表达式的，例如 #id .class > ul a 。首先找到页面上所有匹配 a 的节点，然后找到所有 ul 元素，并且将 a 元素恰好是 ul 元素子节点的元素过滤出来，直至解析到最左侧的选择器 #id 。
如下是在网站上针对 50000 个元素使用不同 CSS 选择器选择元素的时间对比：
| 选择器 | 查询时间(ms) |
|---|---|
div |
4.8740 |
.box |
3.625 |
.box > .title |
4.4587 |
.box .title |
4.5161 |
.box ~ .box |
4.7082 |
.box + .box |
4.6611 |
.box:last-of-type |
3.944 |
.box:nth-of-type(2n - 1) |
16.8491 |
.box:not(:last-of-type) |
5.8947 |
.box:not(:empty):last-of-type .title |
8.0202 |
.box:nth-last-child(n+6) ~ div |
20.8710 |
最慢的选择器接近 20ms，而最快的仅需 3.5ms 左右，由此可见 CSS 选择器越短，解析速度越快！
避免使用 CSS 表达式
IE5 引入了 CSS 表达式，或者称之为 “动态属性”，这样可以让开发人员以更为紧凑的方式在 CSS 中就可以完成高级样式处理。然而，CSS 表达式带来的性能损失是相当大的，因为每当触发任何事件（如窗口大小调整、鼠标移动等）时，浏览器都会重新运行每个表达式，这也是它在 IE8 被弃用的原因之一。如果在页面中使用了 CSS 表达式，则应尽一切努力删除它们，并使用其他方法来实现相同的功能。
避免使用 expensive 的属性
有些属性生来渲染速度就慢于其它属性，下面这些属性在绘制之前可能会导致其它计算，因此尽量避免使用！
border-radiusbox-shadowopacitytransformfilterposition: fixed
精简 CSS 代码
精简 CSS 代码意味着对 CSS 源文件，采取移除无关的空白字符、换行符、注释、去除不必要的单位、去除不必要的零等方法。其可以有效压缩 CSS 文件的大小，减少浏览器下载和执行文件所需的时间。
通过使用近几年来出现的新的页面布局方式，例如 Flexbox 和 Grid 布局，可以有效减少达到之前使用 float 属性进行的相同布局所需要的代码量，以前自己需要做的事情，现在浏览器在底层可以更快的帮你完成。
在引入 CSS 库的时候，也要去仔细对比，在满足要求的条件下，应该尽量选择 size 比较小的库。
优化 CSS 动画
- 同时进行多个 CSS 动画可能不会工作地很好，极有可能导致延迟出现，适当地给一些动画增加
transition-delay属性以避免同时运行多个动画。 - 浏览器加载网页地时候非常忙，因此尽可能地将所有动画延迟到初始加载事件之后的几百毫秒，可以有效提升页面的整体性能。
- SVG 非常适合动画，因为它们可以在不降低分辨率的情况下进行缩放。
- 只在最后才考虑使用
will-change属性，毕竟它也消耗资源！
参考
- 20 Tips for Optimizing CSS Performance
- Tips for Improving CSS and JS Animation Performance
- PageSpeed: Avoid CSS expressions (deprecated)
扫描下面二维码，在手机端阅读本文：
