Что такое 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()
- поиск только по дочерним элементам согласованного элемента (только один уровень вниз).