Selector for best performance in jQuery?

Question

I just spent 2 hours reading online guides and blogs about jQuery selectors. Everybody says different things and every last one of them seem to be so sure. I need an expert

Answer 1

According to jQuery's Docs:

Beginning your selector with an ID is always best.

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

Be specific on the right-hand side of your selector, and less specific on the left.

// Unoptimized:
$( "div.data .gonzalez" );

// Optimized:
$( ".data td.gonzalez" );

Avoid Excessive Specificity

$( ".data table.attendees td.gonzalez" );

// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

Avoid the Universal Selector. Selections that specify or imply that a match could be found anywhere can be very slow.

$( ".buttons > *" ); // Extremely expensive.
$( ".buttons" ).children(); // Much better.

$( ".category :radio" ); // Implied universal selection.
$( ".category *:radio" ); // Same thing, explicit now.
$( ".category input:radio" ); // Much better.

---

Now, with all that said...

It's good to be mindful of this stuff and to optimize where possible, but realistically many of these will, more or less, end up being micro optimizations. If you're looking to trim fat for a performance boost there are probably better places to look.

_{Go ahead... Burn me as a heretic... I'm not scared...}