Question

最好将其用作绩效视角：

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

或

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

Answer 1

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

选择器更快

（注意：随机组成的html只是因为它不仅仅是页面上的那些元素）

Answer 2

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

除非你的代码很慢，否则不要担心性能差异。如果是，请使用分析器确定瓶颈。

从分析的角度来看：

$(".div1 h2, div1 h3")

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

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

如果您计划在.div1上链接其他一些功能，

会更好：

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

Answer 3

实际上，.find（） CAN 更快。

当尝试选择多个元素时，选择器似乎更快找到;但是，如果您使用$ .find，甚至缓存后代，您可以看到它更快： http://jsperf.com/selector-vs-find-again/11

我也不同意表现不重要。在这个智能手机的世界里，电池寿命是王道。

Answer 4

使用jsPerf。

I created one for you

Answer 5

我刚刚找到了这个答案，并希望在这里添加一些数字，可能有人发现它们有用且好奇。在我的例子中，我寻找了唯一元素的最快jQuery选择器。我不想无缘无故地添加ID，所以我想方设法选择没有ID的元素。

在我的小型研究中，我使用了很棒的selector profiler来获取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。干杯！

jQuery单选择器vs .find（）

5 个答案: