CSS 优化

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-radius
  • box-shadow
  • opacity
  • transform
  • filter
  • position: fixed

精简 CSS 代码

精简 CSS 代码意味着对 CSS 源文件,采取移除无关的空白字符、换行符、注释、去除不必要的单位、去除不必要的零等方法。其可以有效压缩 CSS 文件的大小,减少浏览器下载和执行文件所需的时间。

通过使用近几年来出现的新的页面布局方式,例如 FlexboxGrid 布局,可以有效减少达到之前使用 float 属性进行的相同布局所需要的代码量,以前自己需要做的事情,现在浏览器在底层可以更快的帮你完成。

在引入 CSS 库的时候,也要去仔细对比,在满足要求的条件下,应该尽量选择 size 比较小的库。

优化 CSS 动画

  • 同时进行多个 CSS 动画可能不会工作地很好,极有可能导致延迟出现,适当地给一些动画增加 transition-delay 属性以避免同时运行多个动画。
  • 浏览器加载网页地时候非常忙,因此尽可能地将所有动画延迟到初始加载事件之后的几百毫秒,可以有效提升页面的整体性能。
  • SVG 非常适合动画,因为它们可以在不降低分辨率的情况下进行缩放。
  • 只在最后才考虑使用 will-change 属性,毕竟它也消耗资源!

参考

扫描下面二维码,在手机端阅读本文: