Какой самый быстрый способ выбора дочерних элементов в jQuery?

Question

Насколько я знаю, есть несколько способов выбора дочерних элементов в jQuery .

//Store parent in a variable  
var $parent = $("#parent");

Метод 1 (используя область видимости)

$(".child", $parent).show();

Метод 2 (метод find ())

$parent.find(".child").show();

Метод3 (только для непосредственных детей)

$parent.children(".child").show();

Метод 4 (с помощью селектора CSS) - предложено @ spinon

$("#parent > .child").show();

Метод 5 (идентично Метод 2 ) - согласно @ Kai

$("#parent .child").show();

I 'Я не знаком с профилированием, чтобы иметь возможность исследовать это самостоятельно, поэтому я хотел бы посмотреть, что вы скажете.

PS Я понимаю, что это возможный дубликат этого вопроса но это не охватывает все методы.

Answer 1

Метод 1 и метод 2 идентичны, с той лишь разницей, что метод 1 должен проанализировать переданную область и преобразовать ее в вызов $parent.find(".child").show();.

Метод 4 и Метод 5 оба должны проанализировать селектор и затем просто вызвать: $('#parent').children().filter('.child') и $('#parent').filter('.child') соответственно.

Итак, метод 3 всегда будет самым быстрым, потому что ему нужно выполнить наименьшее количество работы и использовать самый прямой метод для получения детей первого уровня.

На основании скорректированных тестов скорости Анурага здесь: http://jsfiddle.net/QLV9y/1/

Тест скорости: (чем больше, тем лучше)

Вкл. Хром , метод 3 лучше, чем метод 1/2, а затем 4/5

Вкл. Firefox , метод 3 по-прежнему лучше, чем метод 1/2, а затем 4/5

Вкл. Опера , метод 3 по-прежнему лучше, чем метод 4/5, а затем 1/2

В IE 8 , хотя в целом медленнее, чем в других браузерах, он все равно следует методу 3, порядку 1,2,4,5.

В целом, метод 3 - это самый лучший метод для использования, так как он вызывается напрямую, и ему не нужно проходить более одного уровня дочерних элементов в отличие от метода 1/2, и он не нужно разобрать как метод 4/5

Однако имейте в виду, что в некоторых из них мы сравниваем яблоки с апельсинами, так как метод 5 рассматривает всех детей, а не детей первого уровня.

Answer 2

Метод 1

Невозможно быть короче и быстрее, используя jQuery.Этот вызов напрямую переходит к $(context).find(selector) ( метод 2 , из-за оптимизации), который, в свою очередь, вызывает getElementById.

Метод 2

делает то же самое, но без каких-либо ненужных внутренних вызовов функций.

Метод 3

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

Метод 4

Использование таких селекторов должно быть медленнее.Так как sizzle (который является механизмом выбора из jQuery) работает справа налево , сначала он будет соответствовать ВСЕМ классам .child, прежде чем будет проверено, являются ли они прямым потомком идентификатора 'parent'.

Метод 5

Как вы правильно указали, этот вызов также создаст вызов $(context).find(selector) из-за некоторой оптимизации в функции jQuery, в противном случае он также может пойтичерез (медленнее) sizzle engine.

Answer 3

Как это старый пост, и все меняется со временем.До сих пор я провел несколько тестов в последних версиях браузера и публикую его здесь, чтобы избежать недоразумений.

При использовании jQuery 2.1 в браузерах, совместимых с HTML5 и CSS3, производительность меняется.

Вот тестовый сценарий и результаты:

function doTest(selectorCallback) {
    var iterations = 100000;

    // Record the starting time, in UTC milliseconds.
    var start = new Date().getTime();

    for (var i = 0; i < iterations; i++) {
        // Execute the selector. The result does not need to be used or assigned
        selectorCallback();
    }

    // Determine how many milliseconds elapsed and return
    return new Date().getTime() - start;
}

function start() {
    jQuery('#stats').html('Testing...');
    var results = '';

    results += "$('#parent .child'): " + doTest(function() { jQuery('#parent .child'); }) + "ms";
    results += "<br/>$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms";
    results += "<br/>$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms";
    results += "<br/>$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms";
    $parent = jQuery('#parent');
    results += "<br/>$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms";

    jQuery('#stats').html(results);
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9, chrome=1" />
    <title>HTML5 test</title>
    <script src="//code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>

<div id="stats"></div>
<button onclick="start()">Test</button>

<div>
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

</body>
</html>

Итак, за 100 000 итераций я получаю:

(Я добавил их как img для форматирования.)

Вы можете запустить фрагмент кода самостоятельно для проверки;)