Which jQuery selection method is faster?

Question

I'm wondering if there's any advantage to using the context parameter when making selections with jQuery versus using a normal CSS scoped selector.

Assuming I have this html:

<div class="contacts">
    <h1>All contacts</h1>
    <div class="contact new">
        <p class="name">Jim Jones</p>
        <p class="phone">(555) 555-1212</p>
    </div>
    <div class="contact new">
        <p class="name">Bob Smith</p>
        <p class="phone">(555) 555-1213</p>
    </div>
    <div class="contact new">
        <p class="name">Dave Baker</p>
        <p class="phone">(555) 555-1214</p>
    </div>
    <div class="contact">
        <p class="name">Pete Harrison</p>
        <p class="phone">(555) 555-1215</p>
    </div>
    <div class="contact">
        <p class="name">George Donald</p>
        <p class="phone">(555) 555-1216</p>
    </div>
    <div class="contact">
        <p class="name">Chris Root</p>
        <p class="phone">(555) 555-1217</p>
    </div>
</div>

If I want to grab all new contacts (marked by 'new' class) from the contacts div, which method is faster, scales better, etc..?

$('.contacts .new');

Or

$('.new', '.contacts');

jsFiddle

Update

There's a lot of great info strewn throughout the answers and comments. To summarize the major points, in most browsers a single selector scales better when there are multiple .contacts divs. The two selector context method is faster, in most browsers, with only a single .contacts div present.

Something useful to take away from that is we can use one method when selecting inside an element with an id.

$('p:first', '#chapter2'); // get the first paragraph from chapter 2

And use the single selector method for instances where we're selecting from a potentially large group of elements.

$('.chapter p:first-child'); // get the first paragraph from all chapters

Answer 1

Against all (my) odds, seems number 2 is the fastest.

Check it here

Answer 2

$('.contacts .new') should, in theory, scale better because it makes only a single call to the selector engine. For $('.new', '.contacts'), a minimum of two calls are made to the selector function — first to get all elements with class name .contacts, and then further calls for each .contacts element returned.

In summary, as soon as more .contacts elements are thrown into the HTML, a loop is required for the second method and it will slow down significantly. If you're not going to have more .contact elements, you should be using an ID which would be even faster.

Answer 3

IIRC, $('.foo', '.bar') delegates to $('.bar').find('.foo'), so the second should be faster.

The reason $('.foo', '.bar') is faster than $('.foo .bar') is because its executed as native getElementsByClassName by sizzle. A case of a selector that just contains a single class name is checked very early in the code, before any complicated logic is executed.

update: like I thought, using find() is slightly faster: http://jsperf.com/jquery-selection-method/2

update 2: I looked it up in jQuery's code - $('.foo', '.bar') does delegate to $('.bar').find('.foo') - https://github.com/jquery/jquery/blob/master/src/core.js#L171.

Answer 4

Of your two examples the first selector would probably be faster. However, if you assign the context to a variable then use the second method it is MUCH faster.

contacts = $('div.contacts');
$('.new', contacts);

You can see results at http://jsperf.com/jquery-context-with-tagname. If you had a larger HTML document prefixing the class with a tag name would also likely yield better performance.