CSS选择器性能 - 伪选择器

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

第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>不是唯一的孩子.

案例C

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

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

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

结论和外卖

基本上,记住一些事情.

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

only-child并不比.class child那个.class只有一个孩子快.

从技术上讲,你所比较的是两个完全不同的东西,用于不同的目的.

结论

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

但是,作为

" :only-child选择器选择有助于特异性吗？"

去:是的,那是选择器的重点.请参阅:http://www.w3schools.com/cssref/sel_only-child.asp

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

FYI

当然有奇怪的例外,但我不会在这里讨论它们,因为我认为你的确切问题没有给出一个很好的例子.

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

我故意试图把它开始归结为这是绘图导致CSS性能命中的原因,而不是找到选择器.然而,我说这个的原因并不是因为找到选择器不花时间,而是因为它的时间对于绘制造成的时间微不足道.也就是说,如果你确实有5000 <div>秒或者其他东西,并试图使用伪选择器设置一些样式,那肯定比使用CSS类和ID要长一点.

尽管如此,在你的例子中它没有任何区别,因为它无论如何都会查看每个元素.为什么only-child有用的性能是因为它会在找到多个子元素之后停止搜索某个元素,而只是class child不这样做.

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

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

我应该指出的一件事是,许多被认为是缓慢的选择者现在可能会大大改善.请参阅:http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/

请记住选择器性能仅对非常大的网站很重要.