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

насколько я знаю, существует несколько способов выбора дочерних элементов в 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) - предложил @спинон

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

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

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

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

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

3 101
profiling jquery performance jquery-selectors

3 ответа:

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

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

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

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

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

On хром, Метод 3 является лучшим то метод 1/2, а затем 4/5

alt текст http://tinyurl.com/2clyrbz

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

alt текст http://tinyurl.com/2e89tp5

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

alt текст http://tinyurl.com/2a9r9r8

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

alt текст http://tinyurl.com/2a8ag59

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

95

Способ 1

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

Способ 2

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

Способ 3

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

метод 4

использование селекторов, как это, должно быть медленнее. Так как sizzle (который является селектором двигателя от jQuery) работает справа налево, он будет соответствовать всем классам .child сначала, прежде чем он выглядит, если они являются прямым потомком от id 'parent'.

способ 5

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

13

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

при использовании 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 итераций I получить:

JS jQuery selector stats

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

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

8