valor - ¿Cuál es el método más rápido para seleccionar elementos descendientes en jQuery?
seleccionar input jquery (3)
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 += "<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, por 100 000 iteraciones consigo:
(Los he agregado como img para el formato).
Puede ejecutar el fragmento de código usted mismo para probar;)
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 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 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 alcance 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).