选择器在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,请告诉我.一个字就足够了.

如果你想要的只是匹配的DOM元素的所有实例.my-class,那么我认为没有理由为什么你应该使用除以下之外的任何东西:

$('.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.

根据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.

现在，话虽如此...

牢记这些内容并在可能的情况下进行优化是一件好事，但实际上，其中许多最终或多或少都会成为微优化。如果您想减少脂肪以提高性能，可能有更好的选择。

_{来...烧我为异教徒...我不怕...}