Что быстрее $ ("s1"). Find ("s2"). Find ("s3") или $ ("s1 s2 s3")?

Question

jQuery довольно многогранен, когда дело доходит до выбора определенных элементов DOM.Сегодня до меня дошло, что два способа получения одинаковых элементов могут давать разную скорость:

$("selector1").find("selector2").find("selector3")

и

$("selector1 selector2 selector3")

(где selectorX может быть идентификатором или классом иличто-нибудь еще)

Оба производят одинаковый набор элементов, но есть ли различия в скорости?Как JQuery фактически пересекает DOM?Это особенно важно во втором случае: идет ли от selector1 к selector3 или наоборот ?

Кто-нибудь измерял разницу между двумя?

Answer 1

Использование одного $('...') примерно в два раза быстрее, чем сцепление $.find() с для меня в Chrome.Этот JSPerf Benchmark даст вам хорошее представление о других браузерах, как только еще несколько человек протестируют его.

Answer 2

Время сам и узнай!

console.time("Selector 1") 
    $("selector1").find("selector2").find("selelector3");
console.timeEnd("Selector 1")

console.time("Selector 2") 
    $("selector1 selector2 selector3");
console.timeEnd("Selector 2")

Answer 3

Есть разница между этими двумя, если вы используете классы. $("selector1 selector2 selector3") будет медленнее в IE, если какой-либо (или все) селекторы являются классами из-за отсутствия поддержки document.getElementByClassname. Также в IE $("selector1").find("selector2").find("selector3") будет медленнее, если selector1 является классом (по той же причине, что и раньше). Я не думаю, что вы найдете кросс-браузерную синхронизацию из-за различных методов, доступных для кода jQuery в IE против FF.

Answer 4

Изучив результаты @jcm, я решил еще немного проверить эти селекторы.Я придерживался предположения, что более сложная структура DOM приведет к совершенно другим результатам.

Вот тесты, которые я создал http://jsperf.com/complex-dom-jquery-selectors-vs-traversal-methods

В нем используется последняя версия jQuery (v1.6).Кажется, что .find() быстрее, чем другие методы обхода.Это очень интересные новости.В течение долгого времени многие пользователи jQuery (включая меня) предлагали совет, что следует использовать методы обхода (и, как правило, избегать метода find) вместо строк селектора.Так много для этого!

Я полагаю, что урок, который нужно усвоить, заключается в том, что, когда абсолютная эффективность является обязательной, а не зависит исключительно от исторических данных, проверяйте свои гипотезы.