jQuery selector performance: $('#a p') versus $('p', $context) versus $context.find('p')

If I have already got, in my variable $a_div, a jQuery object for the DIV in the following markup and I want to find the Ps

<div id="a">
    ...
    <p>...</p>
    ...
</div>

Is there a significant 开发者_如何学Cperformance difference between these ways to select the P elements in the DIV?

$('#a p')
$('p', $a_div)
$a_div.find('p')

And if so, do you know why?

---

This sort of thing is usually browser dependent, but I'd use the 3rd one.

First one, browsers with querySelectorAll will make use of it, so performance should be good.

In browsers that don't support qsa, I think Sizzle finds all p elements on the page, and traverses their ancestors to see if there's a #a element.

$('#a p')

---

I wouldn't use the second one at all, because it gets changed to the third one in the background.

$('p', $a_div)   // becomes $a_div.find('p')

---

Whether via querySelectorAll or getElementsByTagName, you're starting from a known point in the DOM, and only searching within it, so I'd bet that this will generally be fastest.

$a_div.find('p')

---

You can always test it out - http://jsperf.com/some-jquery-selectors-performance-tests

Second one seems to be about thrice as fast as the first one, and third one slightly more. This would definitely differ depending on the rest of your HTML structure, but I'm pretty sure the first one will always remain the slowest.