jQuery单选择器与.find(）

jQuery single selector vs .find()

本文关键字：find 选择器 jQuery      更新时间：2023-09-26

哪个更好地用作性能透视图：

$(".div1 h2, .div1 h3")

或

$(".div1").find("h2, h3")

http://jsperf.com/selector-vs-find-again

选择器是更快的

（注意：组成了随机的html，这样它就不仅仅是页面上的那些元素了）

您的问题的答案是：是的。

不要担心性能差异，除非您的代码很慢。如果是，请使用探查器来确定瓶颈。

从分析的角度来看：

$(".div1 h2, div1 h3")

应该更快，因为jQuery将通过querySelectorAll（如果存在的话）进行管道传输，并且本机代码将比非本机代码运行得更快。它还将节省额外的函数调用。

$(".div1").find("h2, h3")

如果你计划在.div1:上链接一些其他功能，效果会更好

$(".div1").find("h2, h3").addClass('foo').end().show();

实际上，.find（）可以更快。

当试图选择多个元素时，选择器似乎比查找更快；但是，如果您使用$.fund，甚至缓存子代，您可以看到它的速度要快得多：http://jsperf.com/selector-vs-find-again/11

对于绩效不重要，我也不敢苟同。在这个智能手机的世界里，电池寿命是王道。

我刚刚找到了这个答案，想在这里添加一些数字，可能有人觉得它们很有用，也很好奇。在我的例子中，我为惟一元素寻找最快的jQuery选择器。我不喜欢无故添加ID，所以我想办法选择没有ID的元素。

在我的小型研究中，我为jQuery使用了很棒的选择器分析器。以下是我添加探查器的库代码后直接从Chrome控制台启动的代码：

$.profile.start()
// Lets 
for (i = 0; i < 10000; i++) {
  // ID with class vs. ID with find(class)
  $("#main-menu .top-bar");
  $("#main-menu").find(".top-bar");
  // Class only vs element with class
  $( ".top-bar" );
  $( "nav.top-bar" );
  // Class only vs class-in-class
  $( ".sticky" );
  $( ".contain-to-grid.sticky" );
}
$.profile.done()

以下是结果：

jQuery profiling started...
Selector                  Count  Total Avg+/-stddev  
#main-menu .top-bar       10000  183ms 0.01ms+/-0.13 
nav.top-bar               10000  182ms 0.01ms+/-0.13 
.contain-to-grid.sti...   10000  178ms 0.01ms+/-0.13 
.top-bar                  10000  116ms 0.01ms+/-0.10 
.sticky                   10000  115ms 0.01ms+/-0.10 
#main-menu                10000  107ms 0.01ms+/-0.10 
undefined

最慢选择器位于此图表的顶部。最快的在底部。令人惊讶的是，就在ID选择器（即$('#main-menu')）之后，我发现了单个类选择器，例如.top-bar和.sticky。干杯

相关文章：