你可能不知道的一些 CSS 基本知识

很多前端开发同学好像都不太关心 CSS，但其实 CSS 能帮助我们简化许多开发。

了解 CSS 的一些特性和浏览器处理 CSS 的流程，也可以帮助我们让页面拥有更好的性能。

一些术语

与每种编程语言一样，都有用于描述概念的特定术语。CSS 作为一种编程语言，它没有什么不同，了解这些术语才能理解本文的内容。

1. 布局

布局是计算元素在屏幕上占用多少空间，修改 CSS 中的 “布局” 属性（例如：宽度、高度），浏览器将检查所有相关元素并 “重排” 页面，重新绘制受影响的区域并将它们重新组合在一起。

2. 绘制

绘制是为元素的每个视觉部分（颜色、边框等）填充像素的过程，绘图元素通常在多个图层上完成。

更改 “绘制” 属性不会影响页面的布局，因此浏览器会跳过布局步骤。

绘制通常是最耗时的部分。

3. 合成

合成就是让浏览器以正确顺序绘制图层，由于某些元素可以相互重叠，因此此步骤对于确保元素按预期顺序显示很重要。

如果你更改了一个既不需要布局也不需要绘制的 CSS 属性，那么浏览器只需要进行合成。

CSS 性能

后代选择器可能很昂贵

根据应用程序的大小，使用标签后代选择器的开销可能会非常大。浏览器将检查每个后代元素是否匹配，因为关系不限于父子元素。

比如：

#nav a {
}

浏览器需要评估页面上的所有链接 a 标签，然后才确定实际在我们 #nav 部分中的链接。

一种更高效的方法是在我们元素内的每个元素上添加一个特定的选择器 .navigation-link。

浏览器从右到左读取选择器

这个非常重要，解析 CSS 时，浏览器从右到左解析 CSS 选择器。

我们看下面的例子：

.container ul li a {
  color: green;
}

解析的步骤是：

1. 匹配页面上的每个 a 标签；
2. 找到每个包含 a 标签的 li 标签；
3. 使用之前匹配的再缩小范围到每个 ul 标签内；
4. 最后，将上述匹配过滤的定位在有 .container class 的元素内；

通过以上步骤，我们可以看到，选择器越具体，浏览器过滤和解析 CSS 属性的效率就越高。

为了提高性能，我们可以给标签上添加 class 属性或其它类似的属性。

尽可能避免修改布局

某些 CSS 属性的更改将需要更新整个布局。

例如，像 width height top left 这样的属性（也称为 “几何属性”）需要计算布局并更新渲染树。

如果在很多元素上更改这些属性，则需要很长时间来计算和更新它们的位置和尺寸。

绘制的复杂性

在绘画方面，一些 CSS 属性（例如：blur）比其他属性更昂贵。

一些开销比较大的 CSS 属性

CSS 属性开销大意味着它们需要更长的时间来绘制。

其中一些属性包含：

• border-radius
• box-shadow
• filter
• :nth-child
• position: fixed

这并不意味着不去使用它们，我们需要理解的是，如果一个元素使用其中一些属性并且会渲染数百次，那么它将会影响渲染性能。

顺序

CSS 文件中的顺序很重要

比如下面这段 CSS：

.red {
  color: red;
}
.blue {
  color: blue;
}

然后再看看这段 HTML：

<div class="blue red">最终会渲染蓝色</div>
<div class="blue red">最终也会渲染蓝色</div>

通过上面的例子可以得知，HTML 中选择器的顺序无关紧要，CSS 文件中选择器的顺序很重要。

结语

评估 CSS 性能的一个好方法是使用浏览器的开发工具。

如果你使用的是 Chrome 或 Firefox，你可以打开开发人员工具，转到性能选项卡并记录加载页面或与页面交互时发生的情况。

---

全文完，如果觉得这篇文章对你有用，欢迎 点赞 👍、评论 ✍️、收藏 👀