javascript - for - jquery each array of objects
$(). ¿Cada uno vs $.each vs para el bucle en jQuery? (3)
Bien
-
$.each()es una función de jQuery que se utilizará para iterar sobre su lista, por lo que la sobrecarga debe ser la función jQuery, así como la sobrecarga de llamar para esa función para cada elemento en la lista. En este caso -
$(thing).each()La idea detrás de esto es que$(thing).each()una instancia de jQuery y luego itera sobre esta instancia (cada.eachactúa en esa instancia). En su caso, debido a que la instancia con la que lo llamó ya es un objeto jQuery, la sobrecarga es mínima (¿es usted una instancia, sí lo es?). -
for()En este caso, no hay ninguna sobrecarga, excepto buscar la longitud de la lista en cada iteración.
Considera hacer:
var l = g.length;
for (var i=0;i<l;i++) {
// code;
}
Dependiendo de su HTML, la mayoría del tiempo podría estar en el analizador Sizzle Jquery encontrando su selector en el documento.
También tenga en cuenta que no creo que su selector sea el mejor, a menos que las cosas hayan cambiado significativamente recientemente. Los selectores jQuery se evalúan de derecha a izquierda, considere limitar el alcance del selector haciendo un .find() en todo debajo de la primera etiqueta referenciada por id, ya que entonces solo buscará un subconjunto del documento.
No puedo entender por qué está sucediendo.
Leí here que:
El primer $ .each constituye una llamada de función única para iniciar el iterador.
El segundo $ (foo.vals) .each realiza tres llamadas a funciones para iniciar el iterador.
- El primero es para $ () que produce un nuevo conjunto de envoltura jQuery (No estoy seguro de cuántas otras llamadas a funciones se realizan durante este proceso).
- Luego, la llamada a $ () .cada uno.
- Y finalmente hace que la llamada interna a jQuery.each inicie el iterador.
En su ejemplo, la diferencia sería insignificante por decir lo menos. Sin embargo, en un escenario de uso anidado, es posible que el rendimiento se convierta en un problema.
Finalmente, Cody Lindley en jQuery Enlightenment no recomienda usar $ .each para iteraciones mayores que 1000 debido a las llamadas a funciones involucradas. Use una normal para (var i = 0 ... loop.
Así que lo probé con este jsperf:
(tarea: busca a Tr que ha marcado la casilla dentro de ellos, y colorea ese tr.)
Este es el jsbin
Pero mira jsperf
contra todas las expectativas, lo opuesto es la verdad. (Chrome y FF e IE)
El que usa $().each (que llama a tres métodos es el más rápido y etc.
¿Que esta pasando aqui?
Su prueba es demasiado pesada para determinar realmente la diferencia real entre las tres opciones de bucle.
Si desea probar el bucle, debe hacer todo lo posible para eliminar tanto trabajo no relacionado de la prueba como sea posible.
Tal como está, su prueba incluye:
- Selección DOM
- Cruce DOM
- mutación de elemento
Todas esas operaciones son bastante caras en comparación con los bucles en sí. Al eliminar las cosas extra, la diferencia entre los bucles es mucho más visible.
http://jsperf.com/asdasda223/4
Tanto en Firefox como en Chrome, el bucle for es 100 veces más rápido que los demás.
Un enfoque diferente para su "tarea" http://jsfiddle.net/ADMnj/17/
Pero supongo que los problemas de rendimiento provienen de que usted no indica el selector en el asunto correcto
#t tr input:checkbox:checked
VS
#t tr :checkbox:checked
Resumiendo, la forma correcta de verificar si una casilla de verificación está marcada sería llamarla así
#t tr input[checked="checked"]
La lista de selectores de W3.ORG ver el E [foo]
Y por último pero no menos importante, el más rápido es también el que tiene el código más corto, que podría ser el ligero rendimiento diferente que se obtiene de 3 líneas frente a 4 y 5 líneas de código, pero no se puede probar este hecho