jQuery single selector vs .find()

Which is better to use as a performa开发者_开发知识库nce perspective:

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

or

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

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

selector is faster

(NOTE: made up random html just so it wasn't just those elements on the page)

The answer to your question is: yes.

Don't worry about the performance difference, unless your code is slow. If it is, use a profiler to determine bottlenecks.

From an analysis standpoint:

$(".div1 h2, div1 h3")

should be faster as jQuery will pipe it through querySelectorAll (if it exists) and native code will run faster than non-native code. It will also save on an additional function call.

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

is better if you plan on chaining some other functions on .div1:

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

Actually, .find() CAN be faster.

Selectors seem to be quicker over find when trying to select multiple elements; however, if you use a $.find, or even cache the descendant, you can see it's much faster: http://jsperf.com/selector-vs-find-again/11

I also beg to differ about performance not being important. In this world of smart phones, battery life is king.

I've just found this answer and want to add some numbers here, may be someone find them helpful and curious. In my case I looked for fastest jQuery selector for unique element. I don't like to add IDs without reason, so I looked for way to select elements without ID.

In my small research I used awesome selector profiler for jQuery. And here is the code I fired up directly from Chrome console after I added profiler's library code:

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

Here are results:

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

Slowest selectors are on the top of this chart. Fastest ones are at the bottom. Surprisingly for me right after selector by ID i.e. $('#main-menu') I've found single class selector e.g. .top-bar and .sticky. Cheers!