¿Debo usar jQuery.each ()?

Question

Estoy haciendo iteraciones muy frecuentes sobre las matrices de objetos y han estado usando jQuery.each (). Sin embargo, estoy teniendo problemas de velocidad y memoria y uno de los más llamados métodos de acuerdo con mi perfilador es jQuery.each (). ¿Cuál es la palabra en la calle sobre su desempeño? ¿Debo cambiar a un simple bucle for? Por supuesto que estoy arreglando los muchos problemas en mi propio código también.

Answer 1

El código fuente de jQuery de cada uno es la siguiente (Gracias John Resig y el MIT License):

each: function( object, callback, args ) {
    var name, i = 0, length = object.length;

    if ( args ) {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.apply( object[ name ], args ) === false )
                    break;
        } else
            for ( ; i < length; )
                if ( callback.apply( object[ i++ ], args ) === false )
                    break;

    // A special, fast, case for the most common use of each
    } else {
        if ( length === undefined ) {
            for ( name in object )
                if ( callback.call( object[ name ], name, object[ name ] ) === false )
                    break;
        } else
            for ( var value = object[0];
                i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
    }

    return object;
}

Como se puede rastrear y ver, en la mayoría de los casos es el uso de un básico de bucle donde la única cabeza es en realidad la devolución de llamada en sí. no debe hacer una diferencia en el rendimiento.

EDIT:. Esto es con la realización ya ha ocurrido que los gastos generales de selección y se le da una matriz object poblada

Answer 2

este artículo (# 3) corrió algunas pruebas de rendimiento y se encontró que la función jQuery .Cada estaba a punto 10x tan lento como el Javascript nativo para bucle.

  

^{Desde 10 maneras de aumentar su rendimiento de forma instantánea jQuery - 3. uso Por lugar de que cada}
   Uso Firebug , es posible medir el tiempo de cada una de las dos funciones se necesita para ejecutar.

var array = new Array ();
for (var i=0; i<10000; i++) {
    array[i] = 0;
}

console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('native');

console.time('jquery');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jquery');

     

Los resultados anteriores son de 2 ms para código nativo, y 26 ms para "cada" método de jQuery. Siempre y cuando yo lo probé en mi máquina local y no están realmente hacer nada (sólo una mera operación de llenado de matriz), de jQuery cada función tiene más de 10 veces más largo que JS nativa bucle "for". Esto sin duda aumentará cuando se trata de cosas más complicadas, como el establecimiento de atributos CSS u otras operaciones de manipulación de DOM.

Answer 3

Este método debe darle una mejora dramática velocidad.

var elements = $('.myLinks').get(), element = null;
for (var i = 0, length = elements.length; i < length; i++) {
    element = elements[i];
    element.title = "My New Title!";
    element.style.color = "red";
}

El almacenamiento en caché también mejorará el rendimiento.

function MyLinkCache() {
    var internalCache = $('.myLinks').get();

    this.getCache = function() {
        return internalCache;  
    }

    this.rebuild = function() {
        internalCache = $('.myLinks').get();
    }
}

En uso:

var myLinks = new MyLinkCache();

function addMyLink() {
    // Add a new link.
    myLinks.rebuild();
}

function processMyLinks() {
    var elements = myLinks.getCache(), element = null;
    for (var i = 0, length = elements.length; i < length; i++) {
        element = elements[i];
        element.title = "My New Title!";
        element.style.color = "red";
    }
}

Answer 4

Una forma de asegurarse de que está recibiendo el máximo rendimiento de jQuery es almacenar la matriz devuelta de los resultados en una variable en lugar de volver a recorrer el DOM cada vez que necesita para obtener algo.

Ejemplo de lo que NO hay que hacer:

$('.myLinks').each(function(){
    // your code here
});
$('.myLinks').each(function(){
    // some more code here
});

Una mejor práctica:

var myLinks = $('.myLinks');
myLinks.each(function(){
    // your code here
});
myLinks.each(function(){
    // some more code here
});

Answer 5

El uso de la funcionalidad nativa generalmente será que una abstracción, como JQuery.each método más rápido (). Sin embargo, el JQuery.each () método es más fácil de usar y requiere menos código de su parte.

A decir verdad, ninguno de los dos es la decisiones correctas o incorrectas sin ningún contexto. Soy de la OPINIÓN que deberíamos escribir código más fácil primero, asumiendo que es un buen código / legilble / limpio. Si usted entra en una situación, como la que usted está describiendo, donde hay un retraso notable, que es el momento de averiguar cuál es su cuellos de botella y escribir código más rápido.

Sustitución del método JQuery.each () en estos escenarios podría ayuda, sin embargo, no haber visto su código, es posible que usted tiene cuellos de botella no relacionadas con el método jQuery.