¿Cuál es el método más rápido para seleccionar elementos descendientes en jQuery?

Hasta donde yo sé, hay varias formas de seleccionar elementos secundarios en jQuery .

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

Método 1 (usando un alcance)

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

Método 2 (el método find ())

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

Método 3 (solo para niños inmediatos)

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

Método 4 (a través del selector de CSS) : sugerido por @spinon

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

Método 5 (idéntico al Método 2 ) - según @Kai

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

No estoy familiarizado con la elaboración de perfiles para poder investigar esto por mi cuenta, así que me encantaría ver lo que tiene que decir.

PD: Entiendo que esto es un posible duplicado de esta pregunta, pero no cubre todos los métodos.

El método 1 y el método 2 son idénticos con la única diferencia es que el método 1 necesita analizar el alcance pasado y traducirlo en una llamada a $parent.find(".child").show();.

El método 4 y el método 5 necesitan analizar el selector y luego simplemente llamar a: $('#parent').children().filter('.child')y $('#parent').filter('.child')respectivamente.

Entonces, el método 3 siempre será el más rápido porque necesita hacer la menor cantidad de trabajo y usa el método más directo para obtener niños de primer nivel.

Basado en las pruebas de velocidad revisadas de Anurag aquí: http://jsfiddle.net/QLV9y/1/

Prueba de velocidad: (más es mejor)

En Chrome , el método 3 es el mejor, luego el método 1/2 y luego el 4/5

En Firefox , el método 3 sigue siendo mejor que el método 1/2 y luego el 4/5

En Opera , el método 3 sigue siendo mejor que el método 4/5 y luego 1/2

En IE 8 , aunque es más lento en general que otros navegadores, sigue el método 3, ordenamiento 1,2,4,5.

En general, método 3 es el mejor método para usar, ya que se llama directamente y no necesita atravesar más de un nivel de elementos secundarios a diferencia del método 1/2 y no necesita ser analizado como el método 4/5

Sin embargo, tenga en cuenta que en algunos de ellos estamos comparando manzanas con naranjas, ya que el Método 5 analiza a todos los niños en lugar de a los de primer nivel.

Método 1

No puede ser más corto y rápido usando jQuery. Esta llamada se reduce directamente a $(context).find(selector)( método 2 , debido a la optimización) que a su vez, llama getElementById.

Método 2

Está haciendo lo mismo, pero sin algunas llamadas a funciones internas innecesarias.

Método 3

usar children()es más rápido que usar find(), pero, por supuesto, children()solo encontrará hijos directos del elemento raíz, mientras find()que buscará recursivamente de arriba hacia abajo a todos los elementos secundarios (incluidos los elementos secundarios secundarios)

Método 4

El uso de selectores como este tiene que ser más lento. Dado sizzleque (que es el motor de selección de jQuery) funciona de derecha a izquierda , .childprimero coincidirá con TODAS las clases antes de ver si son un hijo directo de id 'parent'.

Método 5

Como indicó correctamente, esta llamada también creará una $(context).find(selector)llamada, debido a alguna optimización dentro de la jQueryfunción, de lo contrario también podría pasar por el (más lento) sizzle engine.

Como es un post antiguo, y las cosas cambian con el tiempo. Hice algunas pruebas en las últimas versiones del navegador hasta ahora, y las estoy publicando aquí para evitar malentendidos.

Con jQuery 2.1 en navegadores compatibles con HTML5 y CSS3, el rendimiento cambia.

Aquí está el escenario de prueba y los resultados:

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>

Entonces, para 100 000 iteraciones obtengo:

(Los he agregado como img para fines de formato).

Puede ejecutar el fragmento de código usted mismo para probar;)