Что является самым быстрым child () или find () в jQuery?

Question

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

Например:

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

Они не обязательно дадут тот же результат: <a href="http://docs.jquery.com/Traversing/find" rel="noreferrer">find()</a> даст вам любой потомок , тогда как <a href="http://docs.jquery.com/Traversing/children" rel="noreferrer">children()</a> даст вам только непосредственных детей , которые соответствуют. *

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

Answer 5

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

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

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

Answer 6

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

Для упрощения:

1. find() - поиск по дочерним элементам, внукам, правнукам соответствующих элементов ... на всех уровнях вниз.
2. children() - поиск только по дочерним элементам соответствующих элементов (на один уровень ниже).