Question

我花了2个小时阅读有关jQuery选择器的在线指南和博客。每个人都说不同的东西，每一个人似乎都是如此肯定。我需要Stackoverflow的专家意见。

$(' #my-id div.my-class ')

$(' #my-id .my-class ')

$(' div.my-class ')

$(' .my-class ')


<div id="my-id">
    <div class="..">
        <div class=".."> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>

您认为哪种选择最佳？我还需要一个简短的解释，因为重写数千行代码是危险的。 它以某种方式发生，我只是不想做两次。

另外，如果我想获得<p>，我应该给它一个类，因为jQuery和CSS从右到左读取选择器吗？

是否有太多课程这样的事情，还是因为人们只是懒惰？

如果相同的规则适用于CSS，请告诉我。一个字就足够了。

Answer 1

如果您想要的只是匹配.my-class的DOM元素的所有实例，那么我认为您没有理由使用除<：p>以外的任何其他内容：

$('.my-class')

其他都是更具体的选择器，如果您想将选择器缩小到$('.my-class')以上，可以使用。

如果您真的想要完全优化性能，那么首先使用jQuery可能不是理想的选择，因为jQuery初始化和jQuery对象的开销往往会减慢速度。您使用jQuery是因为它可以快速编写代码并提供出色的跨浏览器支持和一系列有用的方法。你没有使用jQuery来优化性能。

如果你真的想要比较四个jQuery选项的性能，那么你将不得不设计一组代表性的HTML（必须包含许多其他东西才能真正代表现实世界的情况）然后在一些基准测试工具（如jsperf）中测试每个选择器，并在您关注的所有浏览器中运行该测试，并使用您将使用的jQuery版本，然后查看是否可以得出某些特定结论。

这就像尝试过早优化一样。尽可能简单地编写代码，只有在实际测量到性能问题并且这是代码中存在性能瓶颈的地方时才花时间优化性能。 99.99％的时间，特定选择器的性能不会在您的代码中产生任何差异。代码简单，没有复杂性。在你实际想要优化代码的0.01％的时间里，你可能会非常关心性能，你要么预先缓存元素列表，要么你不会在jQuery中对它进行编码以避免jQuery对象设置和开销。

这是一个jsPerf：http://jsperf.com/jquery-selector-comparison-specificity/4。在最新版本的Chrome，Firefox和IE中测试时，这显示选项之间的差异相对较小。对于$('.my-class')选项略有偏见。

作为参考，你会发现：

document.getElementsByClassName("my-class")

比任何jQuery选项快50倍。

以下是Chrome浏览器中jsperf结果的屏幕截图：

结论

对于您尚未证明您确实存在需要花时间优化的性能问题的正常编码，请使用符合您选择目标的最简单的选择器。
如果它真的对性能至关重要，请使用普通的Javascript，而不是jQuery。

Answer 2

根据jQuery's Docs:

使用ID开始选择器始终是最好的。

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

具体在选择器的右侧，不太具体在左边。

// Unoptimized:
$( "div.data .gonzalez" );

// Optimized:
$( ".data td.gonzalez" );

避免过度的特异性

$( ".data table.attendees td.gonzalez" );

// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

避免使用通用选择器。指定或暗示a的选择匹配可以在任何地方找到，可能会很慢。

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.

$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.

现在，尽管如此......

注意这些东西并在可能的情况下进行优化是件好事，但实际上很多这些或多或少会最终成为微观优化。如果您希望减少脂肪以提高性能，那么可能会有更好的观察方式。

_{_{继续......把我当作一个异教徒......我不害怕...}}

Answer 3

我进行了基准测试，表明最好选择更具体的选择器。

我测试了此HTML：

<div id="my-id">
    <div class="grand">
        <div class="parent"> Awesome stuff! </div>
        <div class="my-class">
            <p> I like carrots! </p>
        </div>
    </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

具有8个不同的选择器：

$(' div#my-id div.grand div.parent div.my-class ').css("background-color", "#cccccc"); //case-1
$(' #my-id .grand .parent div.my-class ').css("background-color", "#cccccc"); //case-2
$(' #my-id .grand .parent .my-class ').css("background-color", "#cccccc"); //case-3
$(' div#my-id div.my-class ').css("background-color", "#cccccc"); //case-4
$(' #my-id div.my-class ').css("background-color", "#cccccc"); //case-5
$(' #my-id .my-class ').css("background-color", "#cccccc"); //case-6
$(' div.my-class ').css("background-color", "#cccccc"); //case-7
$(' .my-class ').css("background-color", "#cccccc"); //case-8

结果表明，case-1，case-2和case-3比其他的要好。您可以看到结果here。

选择器在jQuery中获得最佳性能？

3 个答案:

结论