performance - CSS 选择器性能 - 伪选择器

Question

CSS 选择器从右到左解析，然后显示。

考虑到这一点，基于此代码:

<a href="#" class="myImage">
    <img>
</a>

哪个性能更高？:

.myImage img 

或者

.myImage img:only-child

是否 :only-child帮助选择器选择的特异性？所以不是最初匹配所有<img>然后在文档中寻找父类，是否只匹配<img>是唯一的 child (从而减少选择池)？

引用阅读:http://csswizardry.com/2011/09/writing-efficient-css-selectors/

编辑

发现进一步阅读:

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.

-David Hyatt(Safari 和 WebKit 的架构师，也在 Mozilla、Camino 和 Firefox 上工作)
来源:http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Answer 1

好的，所以这完全取决于用例。我要做的是处理案件。

第 1 点 - 关于给定的例子

案例A

假设您的代码很简单:

<a href="#" class="myImage">
    <img>
</a>

在这种情况下 .myImage img和 .myImage img:only-child将具有基本相同的性能命中。原因如下:

CSS 性能命中源于必须对框进行样式设置或重新设置样式。 CSS 所做的是影响你的图形处理器，而不是 CPU，所以我们只关心视觉更新。并且使用重复属性再次设置样式确实会导致重绘(我的意思是稍后应用的重复属性，这通常是选择器导致的)。

通常，.myImage img将样式 ALL <img>在 .myImage 中.使用 only-child 时选择器可能不会全部设置样式(显然)。

但在本例中，.myImage img和 .myImage img:only-child会做相同的事情，因为它们都会在同一个盒子上导致 1 次绘制/重绘。

案例B

但是假设我们有:

<a href="#" class="myImage">
    <img>
    <img>
</a>

不过，在这里，我们有不同的故事。

在本例中，only-child根本不起作用，因为 <img>不是唯一的 child 。

案例C

最后，假设你有这个，但你只想在下面设置样式:

<a href="#" class="myImage">
    <img>
</a>
<div class="myImage>
    <img>
    <img>
</div>

在这种情况下，使用 only-child选择器在性能方面会明显更好，因为您只会设置一个元素的样式，而不是三个。

结论和要点

基本上，记住几件事。

CSS 选择器可以帮助您编写代码，因为您可以添加更少的 ID 和类，但是，它们几乎总是比使用所有 ID 和类效率低，因为使用选择器会导致额外的重绘。 (因为您不可避免地会使用一些选择器设置多个元素的样式，然后使用 ID 或类重新设置其他元素的样式，从而导致不必要的重绘)

only-child不快于 .class child如果那个 .class 只有一个 child 。

从技术上讲，您要比较的是两个完全不同的东西，用于不同的目的。

结论

最后回答你的问题。在您显示的示例中，两者都没有比另一个更有效，因为它们会导致相同的重绘。

然而，作为

"Does :only-child help specificity in selector selection?"

go: 是的，这就是选择器的重点。见:http://www.w3schools.com/cssref/sel_only-child.asp

资料来源:
我是 Mozilla Thunderbird 和 Mozilla 元素的重要志愿者开发人员，并在 CSS 领域工作。

仅供引用

这当然有一些奇怪的异常(exception)，但我不会在这里讨论它们，因为我认为你的确切问题并没有给出一个很好的例子。

第 2 点 - 关于查找选择器的速度

我故意试图强调这是导致 CSS 性能命中的原因，而不是找到选择器。 然而 ，我之所以这么说，并不是因为找到选择器不需要时间，而是因为它的时间与绘制所带来的时间相比是微不足道的。也就是说，如果你确实有 5,000 <div> s 或其他东西，并尝试使用伪选择器设置一些样式，它肯定会比使用 CSS 类和 ID 长一点。

同样，在您的示例中，它没有任何区别，因为它无论如何都会查看每个元素。为什么only-child性能方面很有帮助，因为它会在找到多个子元素后停止搜索某个元素，而只需执行 class child不会。

伪选择器的问题在于它们通常需要大量额外的搜索，并且它发生在 ID、类等之后。

您提供的链接实际上非常有用，我很惊讶他们没有回答您的问题。

我应该指出的一件事是，许多被认为很慢的选择器现在可能会得到很大的改进。见:http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

请记住，选择器性能仅在非常大的网站上才重要。