CSS 性能：Web 浏览器会合并 CSS 规则的执行吗？ [关闭]答案

【问题标题】：CSS Performance: Do web browsers coalesce the execution of CSS rules? [closed]CSS 性能：Web 浏览器会合并 CSS 规则的执行吗？ [关闭]
【发布时间】：2013-06-14 09:23:01
【问题描述】：

Web 浏览器是否会合并 css 规则的执行以使其高效运行？

我知道多个css规则是级联的。

我只对级联规则的性能影响感兴趣。

例如，对于以下内容：

button,
input,
select {
  display:block;
}

select {
  margin:1rem;
}

我知道display:block; 和margin:1rem; 都将应用于selects。

我只是不确定浏览器是否优化了其内部 css 选择器检查。在上面的示例中，次优浏览器可以检查：

如果按钮、选项或选择，则显示：块；
如果选择，则边距：1rem；

执行这些检查的最佳方式是：

如果按钮或选项，则显示：块；
如果选择，则显示：块；保证金：1rem；

大多数现代浏览器是否足够智能，可以合并 select 选择器的两条规则的执行，以便它们运行第二组检查（最佳检查）？

如果是这样，哪些浏览器及其版本执行 css 规则合并？

也可以提供有关此文档的链接或浏览器功能列表站点上的信息。

我对此感兴趣，因为我想最小化我的 css（这有时涉及复制选择器部分以避免重复声明），并使我的 css 更易于维护。但是，我想确保我的客户的浏览器不会浪费运行冗余 css 选择器的周期。

谢谢。

【问题讨论】：

浏览器这样做有什么意义？
@matt-ball 我刚刚编辑了我的问题以澄清它。
再一次，结合未解析/未解释的 CSS 规则的文本有什么意义？无论如何，浏览器必须解析整个 CSS 文本；如果要通过组合规则进行优化，它将发生在浏览器用来表示 CSS 规则的内部内存结构中，而不是人类可读的文本中。
@matt-ball，我不是在谈论规则的文本。一旦规则被解析，它们必须作为代码执行。我感兴趣的是浏览器是否会次优地执行两个 if 条件来检查一个元素是否是一个选择，或者浏览器是否会最优地只执行一个。次优和最优伪代码现在都作为单独的有序列表包含在我的问题中。
此时它只能依赖于实现，因此您需要询问特定浏览器的 CSS 引擎。

标签： css performance css-selectors coalescing

【解决方案1】：

是的。这就是层叠样式表或 CSS 中“层叠”的含义。

【讨论】：

我不确定我的问题是否正确。
我的问题只是关于幕后的性能优化。
我知道这两个 css 声明都将被应用。
我有兴趣了解浏览器是否真的在后台运行两个选择器，无论何时检查一个元素是否匹配 CSS 规则，或者浏览器是否足够聪明，只检查一次元素是否是一个选择，如果它是，同时应用这两个规则。
我的问题现在更清楚了吗？
我刚刚编辑了我的问题以澄清它
您的问题根本没有被正确理解（无意冒犯）。我认为通过对问题所做的修改来如此彻底地改变你所要求的内容是不合适的。您可能应该再次问这个问题，非常清楚您关心的是什么。为了后代，我认为您应该带回问题的原始文本，因为我认为原始问题对非常新的网页设计师有效。

【解决方案2】：

select {
  display:block;
}

select {
  margin:1rem;
}

将按顺序读取，并且由于没有覆盖它最终将作为

select {
  display:block;
  margin:1rem;
}

在最终表示中。浏览器有它自己的默认 CSS，它会按顺序被所有 CSS 覆盖，并且在 CSS 内部，属性也会按顺序覆盖。如果没有过度使用，那么最终的 CSS 只是所有 CSS 中所有属性的整理 - 因此是 Cascading 样式表。

另外，标签在 HTML 页面中的位置会影响级联。如果是在 CSS 链接之后，则会在读取 CSS 文件后应用，反之亦然。

【讨论】：

我不确定我的问题是否正确。我的问题只是关于幕后的性能优化。我知道这两个 css 声明都将被应用。我有兴趣了解浏览器是否真的在后台运行两个选择器，无论何时检查一个元素是否匹配css规则，或者浏览器是否足够聪明，只检查一次元素是否是一个选择，如果它是, 同时应用这两个规则。我的问题现在更清楚了吗？
我刚刚编辑了我的问题以澄清它