Какой самый быстрый child () или find () в jQuery?

Question

Какой самый быстрый child () или find () в jQuery?

260

Чтобы выбрать дочерний элемент node в jQuery, можно использовать children(), а также find().

Например:

$(this).children('.foo');

дает тот же результат, что и:

$(this).find('.foo');

Теперь, какой вариант является самым быстрым или предпочтительным и почему?

bart 15 март 2009, в 14:41

Источник

26

.find() и .children() - это не одно и то же. Последний перемещается только на один уровень вниз по дереву DOM, как дочерний селектор.
Timothy003 25 март 2012, в 15:46
1

@ Timothy003 Вы описали это неправильно, первый перемещается на один уровень ниже, а не второй
Dipesh Rana 08 июнь 2015, в 12:32
3

@DipeshRana «последний» относится к собственному предложению Тимоти003, а не к вопросу.
Jayesh Bhoot 17 июнь 2015, в 15:25
0

@ Призрак хорошо, братан :)
Dipesh Rana 18 июнь 2015, в 09:51

Показать ещё 2 комментария

Теги:

jquery

jquery-selectors

6 ответов

152

Этот тест jsPerf предполагает, что find() выполняется быстрее. Я создал более тщательный тест, и он по-прежнему выглядит так, как если find() превосходит children().

Обновление:. Согласно комментарию tvanfosson, я создал еще один тестовый пример с 16 уровнями вложенности. find() работает только медленнее при поиске всех возможных div, но find() по-прежнему превосходит children() при выборе первого уровня div.

children() начинает превосходить find(), когда существует более 100 уровней вложенности и около 4000 + div для поиска() для перемещения. Это рудиментарный тестовый пример, но я все же думаю, что find() быстрее, чем children(), в большинстве случаев.

Я прошел через код jQuery в инструментах разработчика Chrome и заметил, что children() внутренне вызывает вызовы sibling(), filter() и проходит через несколько регулярных выражений, чем find().

find() и children() выполняют разные потребности, но в тех случаях, когда find() и children() выдают тот же результат, я бы рекомендовал использовать find().

JR. 07 окт. 2011, в 21:46

4

Кажется, что дети используют методы обхода dom, а find использует селектор api, который работает быстрее.
topek 07 окт. 2011, в 20:29
4

Довольно вырожденный тестовый случай, поскольку у вас есть только один уровень вложенности. Если вы хотите общий случай, вам нужно установить произвольную глубину вложения и проверить производительность, так как find () проходит по более глубоким деревьям, чем children ().
tvanfosson 31 окт. 2011, в 22:15
0

Если вы проверяете, находится ли определенный единственный дочерний элемент (например, event.target) в конкретном элементе dom (например, $ ('. Navbar')), то $ .contains (this, event.target) является самым быстрым (8 433 609 / секунду против 140 Кб для быстрого поиска jquery). jsperf.com/child-is-in-parent
felix 06 сен. 2015, в 11:36

Показать ещё 1 комментарий

81

Вот ссылка, в которой вы можете выполнить тест производительности. find() на самом деле примерно в 2 раза быстрее, чем children().

mactive 14 авг. 2013, в 03:21

0

$ .contains (document.getElementById ('list'), $ ('. test') [0]) составляет 8 433 609 / секунду. Если у вас есть определенные элементы и вы просто хотите знать, находится ли B в A, тогда это лучше всего. jsperf.com/child-is-in-parent
felix 06 сен. 2015, в 11:40
0

Хороший тест. Обратите внимание, что это может быть даже быстрее, если вы сделаете что-то вроде var $test = $list.find('.test'); где $ list - это объект jQuery. jsperf.com/jquery-selectors-context/101
Maciej Krawczyk 07 сен. 2015, в 21:23

22

Это не обязательно даст тот же результат: find() предоставит вам любого потомка node, тогда как children() будет получать только ваши ближайшие дети, которые соответствуют.

В какой-то момент find() был намного медленнее, так как он должен был искать каждого потомка node, который мог бы быть совпадением, а не только непосредственных детей. Однако это уже не так; find() намного быстрее из-за использования собственных методов браузера.

John Feminella 15 март 2009, в 16:34

1

Не согласно другим ответам, ха-ха: с. Только когда у вас очень, очень, очень большое дерево DOM ..
pgarciacamou 31 март 2014, в 18:56
1

@Camou Этому ответу четыре года. find() был намного медленнее в то время!
John Feminella 31 март 2014, в 19:40
0

@camou говорит, что часть выступления была «Не в соответствии с другими ответами». Первый абзац этого ответа точен.
mmcrae 18 апр. 2016, в 18:51

Показать ещё 1 комментарий

11

Ни один из других ответов не касался случая использования .children() или .find(">") для поиска только непосредственных дочерних элементов родительского элемента. Итак, я создал тест jsPerf, чтобы узнать, используя три разных способа различать детей.

Как это бывает, даже при использовании дополнительного селектора " > " .find() все еще намного быстрее, чем .children(); на моей системе, 10x так.

Итак, с моей точки зрения, похоже, нет никаких оснований использовать механизм фильтрации .children() вообще.

Craig Walker 01 дек. 2014, в 19:34

2

Спасибо за этот комментарий! Интересно, стоит ли jQuery просто сделать так, чтобы .children (x) был псевдонимом для .find (">" + x), хотя, вероятно, есть и другие сложности, о которых я не думаю.
Michael Scott Cuthbert 20 авг. 2015, в 17:43
1

Это выглядит как наиболее подходящее сравнение. Спасибо!
GollyJer 06 дек. 2016, в 20:17

1

Оба метода find() и children() используются для фильтрации дочернего элемента согласованных элементов, за исключением того, что первый перемещается на любой уровень вниз, последний перемещается на один уровень вниз.

Чтобы упростить:

find() - поиск через согласованные элементы: ребенок, внук, правнук... все уровни вниз.
children() - поиск только по дочерним элементам согласованного элемента (только один уровень вниз).

Naresh Kumar 04 май 2015, в 13:05

Ещё вопросы

.find() и .children() - это не одно и то же. Последний перемещается только на один уровень вниз по дереву DOM, как дочерний селектор.
@ Timothy003 Вы описали это неправильно, первый перемещается на один уровень ниже, а не второй
@DipeshRana «последний» относится к собственному предложению Тимоти003, а не к вопросу.
Кажется, что дети используют методы обхода dom, а find использует селектор api, который работает быстрее.
Довольно вырожденный тестовый случай, поскольку у вас есть только один уровень вложенности. Если вы хотите общий случай, вам нужно установить произвольную глубину вложения и проверить производительность, так как find () проходит по более глубоким деревьям, чем children ().
Если вы проверяете, находится ли определенный единственный дочерний элемент (например, event.target) в конкретном элементе dom (например, $ ('. Navbar')), то $ .contains (this, event.target) является самым быстрым (8 433 609 / секунду против 140 Кб для быстрого поиска jquery). jsperf.com/child-is-in-parent
$ .contains (document.getElementById ('list'), $ ('. test') [0]) составляет 8 433 609 / секунду. Если у вас есть определенные элементы и вы просто хотите знать, находится ли B в A, тогда это лучше всего. jsperf.com/child-is-in-parent
Хороший тест. Обратите внимание, что это может быть даже быстрее, если вы сделаете что-то вроде var $test = $list.find('.test'); где $ list - это объект jQuery. jsperf.com/jquery-selectors-context/101
Не согласно другим ответам, ха-ха: с. Только когда у вас очень, очень, очень большое дерево DOM ..
@Camou Этому ответу четыре года. find() был намного медленнее в то время!
@camou говорит, что часть выступления была «Не в соответствии с другими ответами». Первый абзац этого ответа точен.
Спасибо за этот комментарий! Интересно, стоит ли jQuery просто сделать так, чтобы .children (x) был псевдонимом для .find (">" + x), хотя, вероятно, есть и другие сложности, о которых я не думаю.
Это выглядит как наиболее подходящее сравнение. Спасибо!

tvanfosson · Accepted Answer · 2009-03-15T16-13-00.000Z

children() смотрит только на непосредственных дочерних элементов node, а find() обходит всю DOM ниже node, поэтому children() должен быть более быстрым с учетом эквивалентных реализаций. Однако find() использует собственные методы браузера, а children() использует JavaScript, интерпретируемый в браузере. В моих экспериментах в типичных случаях разница в производительности невелика.

Что нужно использовать, зависит от того, хотите ли вы только рассматривать непосредственные потомки или все узлы ниже этого в DOM, т.е. выбрать подходящий метод на основе желаемых результатов, а не скорость метода. Если производительность действительно проблема, то экспериментируйте, чтобы найти лучшее решение и использовать его (или посмотреть некоторые из эталонных тестов в других ответах здесь).

Конечно, но что произойдет, если родительский элемент имеет только дочерние узлы? Я собираюсь сделать некоторые профилирование по этому вопросу.
@jason: что-нибудь получалось из твоего профилирования?
Производительность детей и поиска зависит от браузера и от того, насколько сложным является DOM-поддерево для вашего поиска. В современных браузерах find () внутренне использует querySelectorAll, который легко может превзойти children () в сложном селекторе и в небольшом или умеренном поддереве DOM.
Поможет предоставить некоторые количественные результаты ваших экспериментов.
Для меня во всех тестах с вложенностью иерархии от 5 до 20 find () всегда превосходил дочерние (). (проверено в Google Chrome 54) Я ожидал обратного. Поэтому с этого момента я пойду простым путем и найду (...) свои элементы вместо того, чтобы перебирать их с помощью children (). Children (). Children () ...