CSS选择器性能.伪选择器

Question

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

考虑到这一点，基于以下代码：

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

哪个更有表现力？：

.myImage img 

或

.myImage img:only-child

:only-child对选择器的选择有帮助吗？因此，与其最初匹配文档中的所有<img>，然后寻找父类，它是否只匹配作为唯一子类的<img>(从而减少了选择池)？

参考阅读：http://csswizardry.com/2011/09/writing-efficient-css-selectors/

编辑

经进一步阅读：

关于CSS3选择器的一个可悲的事实是，如果您关心页面性能，就根本不应该使用它们。用类和ids装饰您的标记，并在这些类和ids上进行匹配，同时避免使用同级、后代和子选择器，这实际上将使页面在所有浏览器中的性能显著提高。

-David Hyatt ( Safari和WebKit的架构师，也从事Mozilla、Camino和火狐的工作)

Answer 1

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

第1点-关于给定的例子

案例A

假设您的代码是简单的：

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

在这种情况下，.myImage img和.myImage img:only-child将具有本质上相同的性能。原因如下：

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

通常，.myImage img会在.myImage中对所有的<img>进行样式化。在使用only-child选择器时，可能不会全部使用样式(很明显)。

但是在本例中，.myImage img和.myImage img:only-child都会执行相同的操作，因为它们都会导致在同一个框上进行1次绘制/重绘。

案例B

但假设我们有：

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

不过，我们有一个不同的故事。

在本例中，only-child根本无法工作，因为<img>不是唯一的子级。

Case C

最后，假设您有此选项，但您只想在下面设置如下的样式：

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

在这种情况下，使用only-child选择器会显着地提高性能，因为您将只设计一个元素，而不是三个元素。

结论与Takeaway

基本上，记住几件事。

• CSS选择器帮助您编写代码，因为您可以添加更少的ID和类，但是，它们几乎总是比使用所有ID和类的效率低，因为使用选择器会导致额外的重绘。(因为您将不可避免地使用一些选择器对多个元素进行样式化，然后用ID或类重新设置其他元素的样式，从而导致不必要的重绘)
• 如果only-child只有一个孩子，那么.class不会比.class child快。
• 从技术上讲，你所比较的是两种完全不同的东西，用于不同的目的。

结论

最后回答你的问题。在您的示例中，由于它们会导致相同的重绘，所以两者都不会比其他的更有效。

但是，由于

“:only-child对选择器的选择有帮助吗？”

是的，这就是选择的重点。请参阅：only-child.asp

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

FYI

当然，这也有一些奇怪的例外，但我不会在这里重温它们，因为我认为你的问题并没有给出一个很好的例子。

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

我故意想让大家明白这一点，那就是画CSS的原因，而不是找到选择器。但是，我之所以说这不是因为查找选择器不需要花费时间，而是因为与绘图所造成的时间相比，时间很小。也就是说，如果您确实有5,000个<div>或其他东西，并且尝试使用伪选择器来设计一些样式，那么它肯定会比使用CSS类和ID更长一些。

尽管如此，在您的示例中，这并没有什么不同，因为它将检查每个元素。only-child之所以有帮助，是因为它会在找到多个子元素之后停止搜索某个元素，而简单地执行class child就不会了。

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

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

有一点我要指出的是，许多被认为是缓慢的选择器现在可能有很大的改进。请参阅：http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

记住，只有在大型网站上，选择器的性能才是重要的。