Jantine Durnbos在Unsplash拍摄的照片这绝不是对同事的批评，而只是我本人最近学到的关于CSS的重要内容的一小部分。许多开发人员似乎并没有考虑CSS，这已经不是什么秘密了。 从Internet上的讨论以及与朋友和同事的交谈中很容易注意到这一点。 尽管如此，我们还是从同事那里获得了很多知识，有时我了解到没有人告诉我一些重要的CSS细微差别，因为人们根本不花时间研究这个主题。
为了解决这个问题，我进行了一些研究，并列出了一些简短的概念，这些概念对于更好地理解和编写CSS来说是有趣且有用的。
此列表绝对不是穷举。 它仅包含我最近几天学到的新知识以及我想分享的内容，一下子就会对其他人有所帮助。术语学
与任何编程语言一样，某些术语用于描述概念。 作为一种编程语言，CSS没什么不同，因此重要的是要学习一些术语，以简化交流并仅用于个人发展。
后代组合器
您是否看到样式中选择器之间的差距？ 实际上，它有一个名字，它是
一个后代组合器。
后代组合器布局，渲染和合成
这些术语与浏览器中的渲染有关，但它们很重要，因为某些CSS属性会影响渲染管道的各个步骤。
1.布局
布局步骤是计算元素在屏幕上占据多少空间。 更改CSS中的“布局”属性（例如，宽度，高度）意味着浏览器将必须检查所有其他元素并重新绘制页面，即重新绘制受影响的区域并使其重叠。
2.绘画（油漆）
此过程用像素填充元素的所有可视部分（颜色，边框等）。 元素通常绘制在多层上。
更改'paint'属性不会影响布局，因此浏览器会跳过布局步骤，但仍会进行渲染。
渲染时，渲染通常花费最长时间。
3.成分（复合）
合成是浏览器应按正确顺序绘制图层的步骤。 由于某些元素可能会重叠，因此，此时浏览器会检查元素是否按该顺序显示。
如果更改CSS属性，而该属性既不影响布局也不影响渲染，则浏览器仅需进行合成。
有关哪些进程触发各种CSS属性的更多信息，请参见
CSS触发器 。
CSS性能
后代选择器可能很昂贵
根据应用程序的大小，仅使用后代选择器而不使用特定说明可能会严重影响资源。 浏览器将检查是否符合后代的每个元素，因为关系不限于父元素和子元素。
例如：
后代选择器示例浏览器将必须评估页面上的所有链接，然后再进入我们的
#nav部分中的链接。
一种更有效的方法是将特定的
.navigation-link选择器添加到
#nav部分中的每个
<a>链接。
浏览器从右到左读取选择器
似乎我以前应该知道这一重要知识，但我不知道...解析CSS时，浏览器从右到左解析选择器。
考虑以下示例：
浏览器从右向左读取步骤：
- 匹配页面上的所有
<a> ；
- 找到
<li>包含的所有<a> ；
- 进行比赛，并将比赛范围缩小到
<ul>比赛；
- 最后，使用
.container类将上述选择过滤为包含在元素中的.container 。
查看这些步骤，我们看到正确的选择器越具体，浏览器将能够过滤和应用CSS属性的效率越高。
为了提高上述示例的性能，我们可以通过在
<a>标记本身上添加
.container-link-style类的东西来替换
.container ul li a 。
如果可能，请勿更改布局。
更改某些CSS属性需要更新整个布局。
例如，
width ，
height ，
top ，
left的几何属性需要重新计算布局并更新渲染树。
如果您在许多元素上更改这些属性，将需要很长时间来计算和更新它们的位置/大小。
注意渲染复杂度
在渲染方面，某些CSS属性（例如模糊）比其他CSS属性更昂贵。 想出更有效的方法来达到相同的结果。
昂贵的CSS属性
一些CSS属性比其他属性昂贵。 这意味着渲染需要更长的时间。
一些昂贵的属性：
border-radiusbox-shadowfilter:nth-childposition: fixed
这并不意味着它们根本无法使用，但是您需要了解，如果元素使用其中某些属性并被渲染了数百次，它将影响性能。
订购方式
订单事项
让我们看一下这样的CSS：
然后看一下HTML代码：
HTML中选择器的顺序无关紧要，但CSS中的选择器顺序却无关紧要。
评估CSS性能的一种好方法是在浏览器中使用开发人员工具。
在Chrome或Firefox中，您可以打开开发人员工具，转到“性能”选项卡，并记录在加载页面或与页面交互时发生的情况。
Chrome中的“效果”标签屏幕截图资源资源
在探讨本文的主题时，我遇到了一些非常有趣的工具，如下所示：
CSS触发器是一个列出一些CSS功能以及它们如何影响性能的网站。
Uncss是从CSS删除未使用的样式的工具。
Css-explain是解释CSS选择器的小工具。
Fastdom是DOM批处理读/写工具，可加快布局性能。
到此为止！ 希望这有道理！