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

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

Например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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