¿Hay alguna diferencia de rendimiento entre usar dos llamadas separadas para ocultar dos elementos, o sería más o menos eficiente usar solo 1 enunciado? ¿Hay alguna diferencia práctica?rendimiento del selector de jQuery: una afirmación frente a dos
$('#container1').hide();
$('#container2').hide();
vs:
$('#container1, #container2').hide();
Además, ¿cuál crees que es más fácil de leer?
Hay una diferencia de rendimiento menor en que se llama al mismo delegado en ambos elementos, pero esto es muy, muy asignación de memoria menor. Cualquier línea adicional de código también significa más trabajo para el intérprete de JavaScript y el trabajo para el navegador ... eso es más una diferencia que cualquier otra cosa, pero sigue siendo una diferencia infinitesimalmente pequeña.
Respuesta corta: el segundo es ligeramente más rápido/usa menos memoria, es tan increíblemente insignificante que probablemente no podría medir sin bucle decenas de miles de veces.
@Nick - Por curiosidad, ¿ambos resultarán en dos recorridos DOM, o la segunda versión logrará ambos en un recorrido? – user113716
@patrick - Bueno, ambos tienen 2 "cruces", pero ese no es un buen término cuando se utiliza el selector '# ID', en ese caso le pide al navegador que devuelva el elemento directamente (generalmente desde una tabla hash interna, que es por eso que es tan rápido). Estás llamando a un método, obteniendo un elemento ... por lo que no estás haciendo ningún desplazamiento/rastreo/búsqueda cuando usas un ID. Cuando se usan selectores múltiples, Sizzle simplemente los está tomando y buscando 1 por 1, agregándolos a la colección (optimizando cuando sea posible, por supuesto) Con respecto a ** obtener el elemento ID **, ambos realizan la misma cantidad de trabajo. –
Muchas gracias por la explicación. Siempre me pregunté cómo se adquirieron los elementos. De alguna manera asumí que se necesitaban recorridos DOM completos para la selección. Me alegra oír que no es el caso. ¡¡¡Gracias de nuevo!!! – user113716
No importa desde el punto de vista de la eficiencia. Creo que la segunda opción es mejor para la legibilidad, si no necesita adjuntar eventos separados a uno de los elementos: $('#containter1').hide().html('foo'); ... y no el otro elemento.
En este caso específico, no supondría una diferencia práctica. Todavía estás buscando dos identificadores específicos en el DOM.
Por lo que respecta a la legibilidad, los mantendría en una sola declaración, siempre que estén lógicamente agrupados.
Sin embargo, si su próxima línea es algo que opera en container2 por separado, entonces separe el 2. No hay necesidad de realizar extraversiones. Por ejemplo:
//2 dom traversals
$('#container1').hide();
$('#container2').hide().html(some_html);
es más rápido que
//3 dom traversals
$('#container1, #container2').hide();
$('#container2').html(some_html);
Ambos son más o menos lo mismo, el segundo es de unos personajes más corto si eso es una consideración que es importante para usted.
No importa en este caso. – Gumbo
Gracias a todos por las respuestas, muy útil. – wsanville