Ok, à part l'achat d'une bête de machine pour améliorer les performances ...

J'ai une application web pilotée par Javascript / AJAX qui a été écrite en utilisant jQuery afin d'accélérer le temps de développement initial. Je constate que du point de vue des performances, je suis prêt à commencer à supplanter pièce par pièce pour améliorer l'efficacité du code.

Un exemple...

http://jsperf.com/innerhtml-vs-jquery

Je me suis éloigné de l'utilisation de $(selector).text() dans les zones actives pour accéder au DOM natif avec getElementById(id).innerHTML

Je ne sais pas trop où aller pour tirer le meilleur parti de mon argent, quelles sont les zones flagrantes où l'utilisation de jQuery vous fait prendre un coup de performance (en dehors des temps de chargement)?

1
jondavidjohn 7 déc. 2011 à 20:38

5 réponses

Meilleure réponse

Règles de performance jQuery

  1. Utiliser des balises avant les cours
  2. Cache les objets jQuery
  3. Exploitez le pouvoir de l'enchaînement
  4. Utiliser des sous-requêtes
  5. Limiter la manipulation directe du DOM
  6. Tirer parti de la délégation d'événements (alias Bubbling)
  7. Éliminer les déchets de requête
  8. Reportez-vous à $ (fenêtre) .load
  9. Compressez votre JS
  10. Apprenez la bibliothèque
  11. Toujours descendre d'un #id

Ce sont les domaines clés que je garde toujours à l'esprit lors de l'utilisation de jQuery.

3
Jose Vega 7 déc. 2011 à 16:46

$.each boucles, où la boucle est particulièrement grande. S'il est petit, la différence est négligeable, mais les performances d'une boucle JavaScript traditionnelle sont bien meilleures, en particulier lorsqu'il s'agit de grandes quantités de données.

En outre, ce n'est pas spécifiquement ce que vous avez demandé - mais revoyez tous vos sélecteurs lorsque vous utilisez des événements , en particulier pour IE qui ne prend pas en charge "getElementsByClassName" (de nombreux autres navigateurs le font) et le préfixe tous les noms de classe utilisés dans les connexions d'événements avec un ID, si possible. J'ai trouvé cette amélioration des performances IE, en particulier lorsqu'elle est combinée à la suppression de pseudo-sélecteurs sans contexte comme $(":input")

Par exemple.

$(".etc").live("click", function() { } );

Devient

$("#id").delegate(".etc", "click", function() { });
0
SpaceBison 7 déc. 2011 à 16:58

Tout sélecteur personnalisé jquery, c'est-à-dire quelque chose qui n'est pas natif du navigateur, sera plus lent de plusieurs ordres de grandeur. ce faisant

$('.sharedclass').find('crappyselector');

Accélérera les longues recherches.

En outre, si vous effectuez une insertion dans une boucle (par exemple une table), créez d'abord une chaîne, puis insérez-la en une seule fois.

Ce sont les 2 gros que je rencontre.

Aussi, profil profil profil. Il ne sert à rien de réparer quelque chose qui n'est pas un problème.

1
Andrew 7 déc. 2011 à 16:45

Juste en me basant sur les réponses d'autres personnes, je pensais que je mettrais mes propres deux cents sur une réponse souvent citée. Méfiez-vous des différences de navigateur dans les performances du sélecteur! Ce que vous pensez être toujours le plus rapide n'est pas toujours vrai!

Le sélecteur le plus sûr est bien sûr $('#foo'), mais tenez compte des points suivants:

$('.bar') est plus rapide que $('#foo .bar') et $('#foo').find('.bar') dans les navigateurs prenant en charge nativement getElementsByClassName(). En fait, beaucoup plus rapide (plus de deux fois plus rapide dans FF et dans tous les navigateurs sauf IE).

Pour en savoir plus, consultez jsPerf.

Vous pourrez peut-être faire une optimisation de sélecteur spécifique au navigateur.

0
Adam Terlson 7 déc. 2011 à 16:59

Essayez d'autres cadres. Voir cette comparaison où DOJO gagne: http://blog.creonfx.com / javascript / dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparaison J'aime tous les conseils donnés ci-dessus et j'ai trouvé que Jose Vega fonctionnait bien.

1
mozillanerd 7 déc. 2011 à 16:59