Devrais-je utiliser jQuery.each ()?

Question

Je fais très souvent des itérations sur des tableaux d'objets et utilise jQuery.each (). Cependant, j'ai des problèmes de vitesse et de mémoire et l'une des méthodes les plus appelées selon mon profileur est jQuery.each (). Quel est le mot dans la rue à propos de sa performance? Devrais-je passer à une simple boucle? Bien sûr, je corrige également les nombreux problèmes de mon propre code.

Answer 1

Cet article (n ° 3) effectuait des tests de performance et révélait que la fonction jQuery .each était environ 10 fois plus lente que le javascript natif pour la boucle.

Answer 2

Le code source de jQuery est le suivant (merci John Resig et la licence MIT):

 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 voir et le voir, dans la plupart des cas, il utilise une boucle for de base dans laquelle le seul surdébit est simplement le rappel. Ne devrait pas faire une différence dans la performance.

EDIT: C’est avec la prise de conscience que la surcharge du sélecteur s’est déjà produite et que vous recevez un tableau peuplé object .

Answer 3

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

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

La mise en cache améliorera également les performances.

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

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

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

Utilisé:

 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 de tirer le meilleur parti de jQuery consiste à stocker le tableau de résultats renvoyé dans une variable plutôt que de parcourir à nouveau le DOM chaque fois que vous avez besoin d'obtenir quelque chose.

Exemple de ce qu'il ne faut PAS faire:

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

Meilleure pratique:

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

Answer 5

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

En vérité, ni l'un est le bon ou le mauvais choix en dehors de tout contexte. Je suis de l'oppinion que nous devrions être écrit plus facile le premier code, en supposant que c'est bon/legilble/code propre. Si vous entrez dans une situation comme celle que vous décrivez, où il y a un décalage perceptible, qu'il est temps de savoir où votre goulets d'étranglement et à écrire plus vite code.

Remplacement du JQuery.méthode each() dans ces scénarios pourrait aider, toutefois, n'ayant pas vu votre code, il est possible que vous ayez des goulots d'étranglement sans rapport avec la méthode JQuery.