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




(6)

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

Упростить:

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

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

Например:

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

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

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

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


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


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

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


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

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

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

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

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


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

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


$(function () {
// Someone has clicked one of the radio buttons
var myform= 'form.myform';
$(myform).click(function () {
    var radValue= "";
    $(this).find('input[type=radio]:checked').each(function () {
        radValue= $(this).val();
    });
  })
});




jquery jquery-selectors