Dois-je utiliser jQuery.each ()?

Question

Je fais des itérations très fréquentes sur les tableaux d'objets et ont été à l'aide jQuery.each (). Cependant, je vais avoir des problèmes de vitesse et de la mémoire et l'une des méthodes les plus appelés selon mon profileur est jQuery.each (). Quel est le mot dans la rue sur ses performances? Dois-je passer à une simple boucle? Bien sûr, je suis fixant les nombreux problèmes dans mon propre code aussi.

Answer 1

Le code source de jQuery de chaque est la suivante (Merci John Resig et 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;
}

Comme vous pouvez le suivre et de voir, dans la plupart des cas, il utilise une base pour la boucle où la seule tête est vraiment juste le rappel lui-même. Ne devrait pas faire une différence dans la performance.

EDIT:. Ceci est la prise de conscience que les frais généraux de sélection a déjà eu lieu et vous donne un object de tableau contenant

Answer 2

Cet article (# 3) a couru quelques tests de performance et a constaté que la fonction jQuery .each était d'environ 10 fois plus lent que le javascript natif pour la boucle.

  

^{Firebug , il est possible de mesurer le temps de chacune des deux fonctions prend à courir.}

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

     

Les résultats ci-dessus sont 2ms pour le code natif, et 26ms pour la méthode "chaque" de jQuery. Pourvu que je l'ai testé sur ma machine locale et ils ne font en réalité rien (juste une simple opération de remplissage de tableau), chaque fonction de jQuery prend plus de 10 fois plus longtemps que natif JS « pour » boucle. Cela va certainement augmenter quand composer avec des questions plus compliquées, comme la définition des attributs CSS ou d'autres opérations de manipulation DOM.

Answer 3

Cette méthode devrait vous donner une amélioration de la vitesse dramatique.

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

Mise en cache également d'améliorer les performances.

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

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

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

En utilisation:

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

Une façon de vous assurer que vous obtenez le maximum de jquery est de stocker le tableau retourné des résultats dans une variable plutôt que re-traverser le DOM à chaque fois que vous avez besoin pour obtenir quelque chose.

Exemple de ce qu'il ne faut faire:

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

Une meilleure pratique:

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

Answer 5

En utilisant la fonctionnalité native sera généralement méthode plus rapide qu'une abstraction, comme JQuery.each (). Cependant, la méthode JQuery.each () est plus facile à utiliser et nécessite moins de codage de votre part.

A vrai dire, ni l'un est le bon ou mauvais choix sans contexte. Je suis de l'oppinion que nous devrions écrire du code plus facile d'abord, en supposant qu'il est bon code / legilble / propre. Si vous entrez dans une situation, comme celle que vous décrivez, où il y a un retard notable, qu'il est temps de savoir où vos goulots d'étranglement sont et écrire un code plus rapide.

Remplacement de la méthode dans ces scénarios peut aide, cependant, sans l'avoir vu votre code, il est possible que vous avez des goulots d'étranglement JQuery.each () sans rapport avec la méthode JQuery.