Dovrei usare jQuery.each ()?

Question

sto facendo iterazioni molto frequenti negli array di oggetti e sono state usando jQuery.each (). Tuttavia, sto avendo problemi di velocità e di memoria e uno dei più chiamati metodi secondo il mio profiler è jQuery.each (). Qual è la parola per la strada sulle sue prestazioni? Dovrei passare a un semplice ciclo for? Naturalmente sto fissa i molti problemi nel mio codice troppo.

Answer 1

Il codice sorgente di jQuery di ogni è la seguente (Grazie Giovanni Resig e 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;
}

Come è possibile rintracciare e vedere, nella maggior parte dei casi si utilizza uno di base per ciclo in cui l'unica testa è in realtà solo il callback per sé. Non dovrebbe fare la differenza in termini di prestazioni.

EDIT:. Questo è con la realizzazione è già verificato il carico di selezione e si è dato un object array compilato

Answer 2

questo articolo (# 3) ha alcuni test di performance e ha scoperto che la jQuery .each funzione era circa 10 volte lento come il javascript nativo per ciclo.

  

^{Da 10 modi per aumentare istantaneamente il vostro rendimento jQuery - 3. Uso per Invece di ogni}    Utilizzo Firebug , è possibile misurare il tempo ciascuna delle due funzioni necessario per eseguire.

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');

     

I risultati di cui sopra sono 2 ms per il codice nativo, e 26ms per jQuery di "ogni" metodo. Purché ho provato sulla mia macchina locale e non stanno in realtà facendo nulla (solo un semplice array di un'operazione di riempimento), di jQuery ogni funzione prende oltre 10 volte più a lungo JS nativo ciclo "for". Questo sarà certamente aumentare quando si tratta di cose più complicate, come impostazione attributi CSS o altre operazioni di manipolazione DOM.

Answer 3

Questo metodo dovrebbe dare un miglioramento della velocità drammatico.

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";
}

Caching migliorerà anche le prestazioni.

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

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

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

In 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

Un modo per assicurarsi che si stanno ottenendo il massimo da jQuery è per memorizzare la matrice restituita dei risultati in una variabile piuttosto che ri-attraversamento del DOM ogni volta è necessario per ottenere qualcosa.

esempio di cosa non fare:

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

Una migliore pratica:

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

Answer 5

Utilizzando le funzionalità native sarà generalmente metodo di più veloce che un'astrazione, come ad esempio JQuery.each (). Tuttavia, il JQuery.each () metodo è più facile da usare e richiede meno di codifica da parte vostra.

In verità, nessuno dei due è la scelta giusta o sbagliata, senza alcun contesto. Sono del oppinion che dovremmo scrivere codice più facile prima, ammesso che sia buon codice / legilble / pulito. Se si entra in una situazione, come quella che stai descrivendo, dove c'è un ritardo notevole, che è il momento di scoprire dove i vostri colli di bottiglia sono e scrivere codice più veloce.

La sostituzione del metodo JQuery.each () in questi scenari potrebbe di aiuto, tuttavia, non avendo visto il codice, è possibile che ci sia colli di bottiglia non collegati al metodo JQuery.