有很多开发者并不怎么关注 CSS千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版，我想这已经不是什么新鲜事了。通过网上的各种对话千亿体育手机登录版，或者与朋友和同事聊天的时候你都可以观察到这个现象。

然而，在社区中，我们学到的很多知识都是来自于同伴的分享千亿体育手机登录版千亿体育手机登录版，有时我会意识到很多关于 CSS 的基础知识在社区中从来没有被分享过千亿体育手机登录版千亿体育手机登录版，因为其他人从来不愿意花时间在 CSS 上深究千亿体育手机登录版千亿体育手机登录版。

为了解决这个问题千亿体育手机登录版千亿体育手机登录版，我决定对 CSS 做一些研究并整理出一部分概念，我认为这些概念对于更好地理解和编写 CSS 代码很有帮助。

在所有的编程语言中都有一些用来描述概念的特定术语。CSS 作为一门编程语言也是一样的千亿体育手机登录版千亿体育手机登录版，了解这些术语对于沟通交流甚至只是为了提高自己的知识储备都是很有帮助的千亿体育手机登录版。

后代选择器

你知道样式选择器中间的小空格吗千亿体育手机登录版千亿体育手机登录版？它实际上还有一个名字千亿体育手机登录版，它的名字是后代选择器千亿体育手机登录版千亿体育手机登录版。


布局，绘制和渲染层合并

这些术语更多地和浏览器渲染有关，但它仍然很重要千亿体育手机登录版，因为一些 CSS 属性会影响渲染进程的不同步骤。

1. 布局

布局步骤负责计算元素在屏幕上占用的空间大小千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。修改 CSS 中的“布局”属性（例如：宽度千亿体育手机登录版千亿体育手机登录版、高度）意味着浏览器需要检查其他所有的元素并“重排”页面，也就是说重新绘制受影响的区域并将他们合并在一起千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。

2. 绘制

此过程是为元素的可视化部分（颜色千亿体育手机登录版千亿体育手机登录版、边框等）填充像素的过程千亿体育手机登录版?；嬷圃赝ǔＴ诙喔鐾疾闵贤瓿?千亿体育手机登录版千亿体育手机登录版。

改变“绘制”属性不会影响页面的布局千亿体育手机登录版千亿体育手机登录版，所以浏览器会跳过布局步骤但仍然会执行绘制。

绘制经常是整个渲染进程中代价最昂贵的部分千亿体育手机登录版。

3. 渲染成合并

在渲染层合并这个步骤中千亿体育手机登录版，浏览器需要按照正确的顺序绘制图层。因为有一些元素会发生重叠千亿体育手机登录版，所以这个步骤对于确保元素按照预期顺序显示非常重要。

如果你改变了一个既不需要布局也不需要绘制的 CSS 属性千亿体育手机登录版千亿体育手机登录版，那么浏览器只需要做渲染层合并操作千亿体育手机登录版。

CSS 性能

后代选择器或许会非常耗能

取决于程序的大小千亿体育手机登录版，仅仅使用没有什么特殊性的后代选择器代价会非常昂贵千亿体育手机登录版。浏览器会检查每个后代元素是否匹配，因为后代这种关系不仅限于父子之间千亿体育手机登录版千亿体育手机登录版。

例如：


浏览器会评估页面上的所有链接千亿体育手机登录版，最终定位到那个实际位于 #nav 元素内的链接千亿体育手机登录版。

一种更高效的方法是在 #nav 元素中的每个 元素上添加一个特定的 .navigation-link 选择器千亿体育手机登录版千亿体育手机登录版。

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

我觉得我应该知道这个千亿体育手机登录版，因为这个听起来很重要，但我并不知道……

解析 CSS 时千亿体育手机登录版，浏览器会从右到左解析 CSS 选择器千亿体育手机登录版。

让我们看看下面的例子：

采取的步骤如下：

?匹配页面上的每个 <a> 元素。
?找到被 <li> 元素包裹的 <a> 元素千亿体育手机登录版。
?使用之前的匹配结果并将范围缩小到那些被 <ul> 元素包裹的结果千亿体育手机登录版。
?最终千亿体育手机登录版，在上面的选项中筛选出那些被类名为 .container 的元素包裹的结果。
从上面的步骤我们可以看出千亿体育手机登录版，靠右的选择器越具体，浏览器过滤和解析 CSS 属性的效率就越高千亿体育手机登录版。

为了提高上面例子的性能千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版，我们可以在 <a> 标签上面添加类似 .container-link-style的类名来替换 .container ul li a千亿体育手机登录版千亿体育手机登录版。

尽可能避免修改布局

更改某些 CSS 属性可能会需要更新整个页面的布局千亿体育手机登录版。

例如，width千亿体育手机登录版、height千亿体育手机登录版千亿体育手机登录版、top、left（也称为“几何属性”）等属性就需要重新计算布局和更新渲染树。

如果在大量的元素上更改这些属性，那么计算和更新他们的位置/大小需要花费很长的时间千亿体育手机登录版千亿体育手机登录版千亿体育手机登录版。

小心绘制的复杂性

在绘制方面，一些 CSS 属性（例如：blur）会比其他属性花费更高的代价?千亿体育手机登录版？梢钥悸鞘褂闷渌行У姆椒ɡ词迪窒嗤男Ч?千亿体育手机登录版千亿体育手机登录版。

代价高昂的 CSS 属性

一些 CSS 属性会比其他属性花费更高的代价千亿体育手机登录版，这意味着他们需要更长的时间来绘制千亿体育手机登录版。

其中一些属性如下：

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

这并不意味着你根本不应该使用他们千亿体育手机登录版千亿体育手机登录版，但你应该明白千亿体育手机登录版，如果一个元素使用其中某些属性并将渲染数百次千亿体育手机登录版，会影响到渲染性能。

顺序

顺序在 CSS 文件中很重要

让我们看下面的 CSS 代码：



然后再来看看这段 HTML 代码：



我们会发现影响渲染效果的不是选择器在 HTML 代码中出现的顺序千亿体育手机登录版千亿体育手机登录版，而是选择器在 CSS 文件中出现的顺序千亿体育手机登录版。

评估 CSS 性能的一个好方法是使用浏览器的开发者工具千亿体育手机登录版千亿体育手机登录版。