method - javascript for each
$.each() vs for() loop-y rendimiento (6)
Estas son principalmente algunas de las cosas que me he estado preguntando, tal vez alguien me puede dar un poco más de información sobre ellas, ¡compartiré lo que he notado hasta ahora!
Lo primero que me he estado preguntando ... ¿hay alguna diferencia que sea buena o razón de usar?
$(''element'').each(function (i, el) { });
-- versus --
$.each($(''element''), function (i, el) { });
Mirando los documentos de jQuery no veo ninguna rima o razón para uno u otro (tal vez conoces una instancia o cosas adicionales que uno puede hacer sobre el otro.
Pero más importante, me preocupa la velocidad aquí
// As opposed to $.each() looping through a jQuery object
// -- 8x faster
for (var i = 0, $(''.whatever'').length; i < len; i++) {
$(''.whatever'')[i] // do stuff
}
Si revisas esta jsFiddle DEMO aquí , verás que la diferencia de velocidad es básicamente equivalente con cualquiera de ellos, pero lo más importante es que siempre debería estar usando for() loops ...
Solo estaba realizando pruebas unitarias (recorriendo cada una de las 5 funciones de escenario diferentes, 50,000 veces), simplemente pasando por un grupo de elementos de la lista, y estableciendo un nuevo data-newAttr , nada especial.
PREGUNTA :: Supongo que mi mayor pregunta es, ¿por qué no usar siempre los bucles al iterar a través de un objeto? ¿Hay incluso un punto para usar $ .each ()? ¿Siempre utiliza los bucles for () incluso cuando atraviesa objetos jQuery?
Function type: Execution Time:
_testArea.each() + $(this) 1947 <-- using $(this) slows it down tremendously
$.each() + $(this) 1940
_testArea.each() + el(plain JS) 458 <-- using the Element speeds things up
$.each() + el(plain JS) 452
for() loop + plainJS[0] iteration 236 <-- over 8x faster
Solo mis 2cents. :)
jQuery.each vs for-loop
Ventajas jQuery.each:
- Se adapta bien en el código jQuery (encadenamiento y estilo).
- No se preocupe por el alcance (las referencias al iterador y al objeto serán persistentes).
- Se puede usar universalmente (para todo tipo de objetos e iterar sobre claves de objetos).
Ventajas for-loop:
- Alto rendimiento (para juegos / animaciones / conjuntos de datos grandes).
- Control total sobre el iterador (saltear elementos, empalmar elementos de la lista, etc.).
- El for-loop siempre funcionará, ya que no hay dependencia en jQuery.
- La misma sintaxis familiar que la mayoría de los otros idiomas similares.
Código de ejemplo
Este es un código de ejemplo de cómo prefiero iterar sobre una lista.
var list = [''a'', ''b'', ''c'', ''d'', ''e'', ''f''];
jQuery.each:
$.each(list, function(i, v)
{
// code...
});
For-loop sin cierre:
for(var i=0,v,n=list.length;i<n;i+=1)
{
v = list[i];
// code...
}
For-loop con cierre:
for(var i=0,n=list.length;i<n;i+=1)
{
(function(i, v)
{
// code...
})(i, list[i]);
}
Nota: sugiero que solo use el for-loop estándar, y solo use un cierre cuando sea necesario. Sin embargo, cuando su código se parece más a jQuery que a Javascript de todos modos, puede ser más fácil simplemente usar $.each . En caso de problemas de rendimiento, siempre puede examinarlo después.
Cuando fui a su enlace aquí hay dos números que obtuve:
$.each() + el(plain JS) 401
for() loop + plainJS[0] iteration 377
Si la diferencia es tan pequeña, elija la que sea más legible, pero si tiene requisitos de tiempo muy elevados, puede que necesite ir con lo que termina siendo el más rápido.
Le sugiero que escriba su programa para usar tres métodos diferentes, los dos anteriores, y luego use el foreach que se encuentra en las versiones más nuevas de javascript, y para aquellos navegadores que no lo admitan, puede agregarlo como prototipo.
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
Sabes cuáles son tus requisitos y qué hará tu programa, así que solo escribe tus propias pruebas y asegúrate de que cumplan con los requisitos en los navegadores que admitirás.
Para su primera pregunta, me gustaría ir con $(''element'').each ya que es mucho más fácil de leer, pero solo mi opinión.
Ejecuté una prueba de rendimiento simple hace un tiempo http://jsperf.com/forloops3 . Parece que seguir el for loop sencillo, viejo for loop (donde es posible) es el camino a seguir :)
En realidad, hay una gran diferencia entre $ .each () y $ (). Each ().
Hacen cosas ligeramente diferentes dependiendo de lo que estás pasando.
http://api.jquery.com/each/ vs http://api.jquery.com/jquery.each/
jquery.each es un iterador genérico, donde $ (). each () es específico de una colección jquery.
También vea: http://jsperf.com/each-vs-each-vs-for-in/9
Una cosa que .each() permite hacer eso no se puede hacer con un ciclo for está encadenando .
$(''.rows'').each(function(i, el) {
// do something with ALL the rows
}).filter(''.even'').each(function(i, el) {
// do something with the even rows
});
Jugué con tu JSFiddle para ver cómo el encadenamiento influye en el rendimiento en los casos en los que tienes que recorrer subconjuntos del conjunto original de elementos coincidentes.
El resultado no fue tan inesperado, aunque creo que la sobrecarga de end() se exageró aquí debido a la combinación de pocos elementos y muchos bucles. Aparte de eso: los bucles JS simples son aún un poco más rápidos, pero si eso pesa hasta la legibilidad adicional de .each() (y encadenamiento) es discutible.
Una cosa que obtienes con .each() es el alcance local automático (porque estás invocando una función anónima para cada objeto), lo que a su vez significa que estás creando aún más funciones / cierres anónimos / controladores de eventos / lo que sea en cada iteración, nunca tendrá que preocuparse de que sus manejadores compartan una variable. Es decir, JavaScript no funciona como otros idiomas cuando se trata de ámbitos locales, pero como puede declarar una variable en cualquier lugar, puede engañarlo algunas veces.
En otras palabras, esto está mal:
var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
el = someObjectArray[idx]
el.someEventHandler(function(){
alert( "this is element " + idx);
});
}
Cada vez que alguno de esos objetos invoque su "algún Evento" después de este ciclo (tenga en cuenta que está compuesto), la alerta siempre dirá lo que fue asignado por última vez a idx , que debería ser (a partir del momento invocado) someObjectArray.length ;
Para asegurarse de guardar el índice correcto, debe declarar un ámbito local, crear una variable y asignarla a esa variable para su uso.
var idx,el;
for (idx = 0; idx <someObjectArray.length; idx++){
el = someObjectArray[idx];
(function(){
var localidx = idx;
el.someEventHandler(function(){
alert( "this is element " + localidx);
});
})();
}
Como puede ver, eso es tan feo como el infierno, pero debería funcionar. Cada controlador de eventos obtiene su propia copia de localidx
Ahora compara eso con .each()
$(someObjectArray).each(function (idx, el) {
el.someEventHandler(function(){
alert( "this is element " + idx);
});
});
Mucho más simple, ¿no?