高效的 CSS 选择器答案

【问题标题】：Efficient CSS selector高效的 CSS 选择器
【发布时间】：2013-04-05 18:10:04
【问题描述】：

我知道我们应该避免使用 CSS 后代选择器，但我只是想知道这两个中哪一个更有效，为什么？

#myDiv .childDiv .grandchildAnchor span

或

#myDiv > .childDiv > .grandchildAnchor > span

您可以假设两者都对我的标记有效。我应该如何测试这种事情。是否有一个在线平台，我可以在其中编写我的两个版本的代码，它会从效率方面获取我的结果。

编辑：我想学习这些东西。

给定两个 CSS 选择器，我如何知道它们中的哪一个工作得更快。只是为了知识。
在线平台，我可以在其中测试两个选择器的呈现。

【问题讨论】：

我无法想象这种差异甚至可以衡量的情况。
想象一下，我尽可能将所有类似于 V1 的选择器替换为 v2 中的选择器。我有很长的 CSS 文件。我只想知道浏览器如何更有效地读取和解析。
@blunderboy - 当你说长的时候是几百K吗？ AKA 什么都没有。
两个选择器都很糟糕，使用正确描述所需元素的选择器，仅此而已。

标签： css performance css-selectors

【解决方案1】：

根据 Mozilla 的说法，有一个明确的答案：避免使用后代选择器

后代选择器是 CSS 中最昂贵的选择器。它是非常昂贵——特别是如果选择器在标签中或通用类别。

通常，真正需要的是子选择器。为了例如，性能太差了，后代选择器在 Firefox 的用户界面 CSS 中被禁止，没有特定的理由。在您的网页上做同样的事情是个好主意

不好
树头树行树细胞{…}

更好，但仍然很糟糕（请参阅下一个指南）
树头 > 树行 > 树细胞 {…}

您可以在以下位置找到上述报价及更多信息： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

【讨论】：

【解决方案2】：

只需使用ids。那么你就可以在自动化测试中受益，参见 QTP

【讨论】：

【解决方案3】：

如果您正在规划您的 CSS 选择器，哪些选择更有效，那么您关注的是错误的问题。

不要一分钱一分货，一分钱一分货。

要以任何有意义的方式减慢浏览器的速度，绝对需要大量的 HTML 和 CSS，因此与其关注哪个选择器更高效，不如关注哪个选择器合适。您可以通过压缩图像、缩小 CSS 和 JS 或简单地从页面中删除单个图像来节省更多性能。

在您的示例中，两个选择器都不合适，也没有效率。除非您有非常很好的理由嵌套选择，否则您的 CSS 应该优化为：

//specificity 0-0-1-0
.some-span-type {
    ...
}

您可能需要检查 span 是否位于特定类型的容器中，在这种情况下您可能需要使用：

//specificity 0-0-2-0
.some-container .some-span-type {
    ...
}

您还可能需要检查跨度是否在唯一容器内，在这种情况下您可能需要使用：

//specificity 0-1-1-0
#some-container .some-span-type {
    ...
}

问题在于，一旦您开始使用两个或三个选择器添加更多样式，您很快就会发现您需要三个或四个或五个选择器来设置后续元素的样式以正确覆盖现有样式。

【讨论】：

我已经在我的问题中提到我知道我们不应该使用嵌套选择器。我只是想知道其中哪些更有效以及为什么。给定两个选择器，我怎么知道哪个更好。所以我问了一个在线平台。无论如何，谢谢你的回答。
.foo .bar 用于当你想选择所有.bar .foo 的后代时，.foo > .bar 用于当你想选择所有.bar children.foo。有一个有意义的区别，你的问题类似于问，“锤子还是螺丝刀哪个性能更好？”
我明白你的意思，我理解其中的区别。但是假设在我的类 foo 的元素中只有一个类 bar 的元素。那么两者是等价的。正确的？现在，没有锤子/螺丝刀的问题，因为在我的情况下两者都是一样的。
在这种情况下，您应该坚持使用.bar。

【解决方案4】：

有性能测试仪
https://sites.google.com/site/skiadocs/developer-documentation/skia-debugger
使用示例
http://www.html5rocks.com/en/tutorials/speed/css-paint-times/

【讨论】：