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

Hasta donde sé, hay una serie de formas de seleccionar elementos secundarios en jQuery .

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

Método 1 (mediante el uso de un scope)

 $(".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 los perfiles para poder investigar esto por mi cuenta, así que me gustaría ver lo que tienes que decir.

PD. Entiendo que este 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 de que el método 1 necesita analizar el scope pasado y traducirlo a una llamada a $parent.find(".child").show(); .

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

Por lo tanto, el método 3 siempre será el más rápido porque necesita hacer la menor cantidad de trabajo y utiliza 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 método 1/2 y luego 4/5

texto alternativo http://tinyurl.com/2clyrbz

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

texto alternativo http://tinyurl.com/2e89tp5

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

texto alternativo http://tinyurl.com/2a9r9r8

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

texto alternativo http://tinyurl.com/2a8ag59

En general, el método 3 es el mejor método general para usar como se lo 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 método 4/5

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

Método 1

No puede ser más corto y más 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 a 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á childrens directos del elemento raíz, mientras que find() buscará recursivly top-down en todos los elementos secundarios (incluidos los elementos secundarios secundarios)

Método 4

Usando selectores como este, tiene que ser más lento. Dado que sizzle (que es el motor selector de jQuery) funciona de derecha a izquierda , coincidirá con TODAS las clases .child primero antes de que se vea si son un elemento secundario directo de id ‘parent’.

Método 5

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

Como es una publicación anterior, y las cosas cambian con el tiempo. Hice algunas pruebas en las últimas versiones de navegador hasta ahora, y lo publico aquí para evitar malentendidos.

Al usar 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 += "
$('#parent > .child'): " + doTest(function() { jQuery('#parent > .child'); }) + "ms"; results += "
$('#parent').children('.child'): " + doTest(function() { jQuery('#parent').children('.child'); }) + "ms"; results += "
$('#parent').find('.child'): " + doTest(function() { jQuery('#parent').find('.child'); }) + "ms"; $parent = jQuery('#parent'); results += "
$parent.find('.child'): " + doTest(function() { $parent.find('.child'); }) + "ms"; jQuery('#stats').html(results); }
 < !doctype html>     HTML5 test