Производительность селектора jQuery: $ ('# a p') против $ ('p', $ context) и $ context.find ('p')

Question

Если я уже получил в моей переменной $a_div объект jQuery для DIV в следующей разметке, и я хочу найти Ps

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

Есть ли значительная разница в производительности между этими способами выбора элементов P в DIV?

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

А если так, знаете почему?

Answer 1

Такие вещи обычно зависят от браузера, но я бы использовал третий.

Первый, браузеры с querySelectorAll будут использовать его, поэтому производительность должна быть хорошей.

В браузерах, которые не поддерживают qsa, я думаю, что Sizzle находит все p элементов на странице и обходит своих предков, чтобы увидеть, есть ли элемент #a.

$('#a p')

---

Я бы вообще не использовал второй, потому что он заменяется на третий в фоновом режиме.

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

---

Через querySelectorAll илиgetElementsByTagName, вы начинаете с известной точки в DOM и ищете только внутри нее, поэтому я готов поспорить, что это, как правило, будет самым быстрым.

$a_div.find('p')

Answer 2

Вы всегда можете проверить это - http://jsperf.com/some-jquery-selectors-performance-tests

Второй кажется примерно в три раза быстрее первого, а третий чуть больше. Это определенно будет отличаться в зависимости от остальной части вашей HTML-структуры, но я уверен, что первая всегда будет самой медленной.