CSS 选择器冗余与性能答案

【问题标题】：CSS selector redundancy vs preformanceCSS 选择器冗余与性能
【发布时间】：2016-03-04 08:46:55
【问题描述】：

对于一般的 CSS 使用，什么更好？我正在展示一个具体的例子，但这个问题更适合在任何情况下普遍应用。

table.class tbody tr td.class2 {
    stuff;
}

或

td.class2 {
    same stuff;
}

（如果唯一的 td.class2 总是有父母：table.class tbody tr。）

我假设第二个更快，除非在某些极端情况下，其中有很多表具有狂野的规则、依赖关系和类似的东西。第一个更具体，所以它使事情更清楚，但我认为当有很多时，很难跟踪它。

在编写 CSS 时哪个更好？我认为这取决于上下文：

作为一项普遍的好政策。
没有大量访问者和内容的网页。
没有大量访问者，但包含大量表格和内容的网页。
确实有大量访问者但没有相当多的表格和内容的网页。
确实拥有大量访问者和内容的网页。

感谢您的宝贵时间！

【问题讨论】：

"(如果唯一的 td.class2 总是有父级：table.class tbody tr.)" 如果您可以对您的 CSS 将应用于的所有页面做出这样的假设，那么就有没有理由必须指定选择器的其余部分。这里不涉及级联（选择器不级联）。

标签： css performance css-selectors redundancy

【解决方案1】：

Optimize browser rendering 在 Google Developers 上有一篇很好的文章涵盖了这一点。您应该永远记住的在该 pos 中两次突出显示的关键点是：

引擎从右到左评估每个规则，从最右边的选择器（称为“键”）开始，遍历每个选择器，直到找到匹配项或丢弃规则。

和

根据这个系统，引擎需要评估的规则越少越好。

Mozilla 开发者网络上的Writing Efficient CSS 也涵盖了这个主题。

所以第二个在所有 5 种情况下都更有效，因为无论内容多少，浏览器都会做更少的工作。

一般来说，我将“优化的 CSS”视为 CSS 选择器的链深度的减少，以最大限度地减少对 HTML 结构的依赖。优秀的Scalable and Modular Architecture for CSS (SMACSS) 涵盖了这一原则以及更多内容，它本质上是 CSS 的样式指南，不是框架或类似的东西。特别是我会看看Selector Performance 和Depth of Applicability 部分。

【讨论】：

太棒了，这就是我需要的所有信息！喜欢头像，美好的旧时光！

【解决方案2】：

作为一个不错的选择，您可能希望文件大小尽可能小。我的意思是，理想情况下，您需要一个适合您需求的结构，ala 使您的网站具有正确的外观，并且是尽可能小的尺寸。

当您在需要不同布局的不同父结构中有多个 class2 元素时，您提到的第一种方法很好。话虽如此，如果所有 class2 元素都位于相同的父结构和总体布局中，则第二种方法就足够了，并且会减小整体大小并提高速度。

【讨论】：