选择器在jQuery中获得最佳性能？
我花了2个小时阅读有关jQuery选择器的在线指南和博客。 每个人都说不同的东西，每一个人似乎都是如此肯定。 我需要Stackoverflow的专家意见。
$(' #my-id div.my-class ') $(' #my-id .my-class ') $(' div.my-class ') $(' .my-class ') Awesome stuff! I like carrots!
您认为哪个是最好的选择器？ 我还需要一个简短的解释，因为重写数千行代码是危险的。 它以某种方式发生，我只是不想做两次 。
另外，如果我想获得
，我应该给它一个类，因为jQuery和CSS从右到左读取选择器？
甚至有太多课程这样的事情还是因为人们只是懒惰？
如果相同的规则适用于CSS，请告诉我。 一个字就足够了。
如果您想要的只是与.my-class匹配的DOM元素的所有实例，那么我认为没有理由为什么您应该使用除以下之外的任何东西：
$('.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结果的屏幕截图：
结论
-
对于您尚未certificate实际存在性能问题的正常编码，您需要花时间优化，请使用符合您选择目标的最简单的选择器。
-
如果它真的是性能关键，请使用普通的Javascript，而不是jQuery。
根据jQuery的文档：
用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" );
避免使用通用选择器。 指定或暗示可以在任何地方找到匹配的选择可能非常慢。
$( ".buttons > *" ); // Extremely expensive. $( ".buttons" ).children(); // Much better. $( ".category :radio" ); // Implied universal selection. $( ".category *:radio" ); // Same thing, explicit now. $( ".category input:radio" ); // Much better.
现在，尽管如此……
注意这些东西并在可能的情况下进行优化是很好的，但实际上很多这些或多或少会最终成为微观优化。 如果你想减肥以提高性能，可能会有更好的观察方式。
来吧……把我当作一个异教徒……我不害怕……
我做了一个基准测试，向我展示了选择更具体的选择器更好。
我测试了这个HTML：
Awesome stuff! I like carrots!
有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都优于其他case-3 。 你可以在这里看到结果。