Что такое fastest children() или find() в jQuery?

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

Например:

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

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

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

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

Ответ 1

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

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

Ответ 2

Этот тест 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().

Ответ 3

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

Chrome on OSX10.7.6

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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