Comment optimiser les performances de jQuery ? Résumé des méthodes d'optimisation

Comment optimiser les performances de jQuery ? L'article suivant vous présentera quelques méthodes d'optimisation pour jQuery. J'espère qu'il vous sera utile !

Je cherchais des conseils sur l'optimisation des performances de jQuery pour alléger mon application Web dynamique et gonflée. Après avoir recherché de nombreux articles, j'ai décidé de répertorier certaines des suggestions les meilleures et les plus couramment utilisées pour optimiser les performances. [Apprentissage recommandé : Tutoriel vidéo jQuery]

1. Suggestions d'optimisation des performances du sélecteur

1. Toujours hériter de #idsélecteur

C'est une règle d'or pour les sélecteurs jQuery. Le moyen le plus rapide de sélectionner un élément dans jQuery est de le sélectionner par ID.

2. Utiliser la balise devant la classe

Le deuxième sélecteur le plus rapide dans jQuery est le sélecteur de balise (tel que $('head')), car il provient directement de la méthode Javascript native getElementByTagName(). Il est donc préférable de toujours utiliser des balises pour modifier les classes (et n'oubliez pas l'ID le plus proche)

Le sélecteur de classe dans jQuery est le plus lent, car il traversera tous les nœuds DOM sous le navigateur IE. Essayez d'éviter d'utiliser des sélecteurs de classe. N'utilisez pas non plus de balises pour modifier les identifiants.

3. Utiliser des sous-requêtes

Mettre en cache l'objet parent pour une utilisation future

4. Optimiser le sélecteur pour s'adapter au modèle "de droite à gauche" de Sizzle

Depuis la version 1.3, jQuery adopte La bibliothèque Sizzle est installée, ce qui est très différent de la version précédente en termes de comportement sur le moteur de sélection. Il remplace le modèle « de droite à gauche » par un modèle « de gauche à droite ».

5. Utilisez find() au lieu de la recherche contextuelle

La fonction find() est en effet plus rapide. Mais si une page comporte de nombreux nœuds DOM, la recherche peut prendre plus de temps :

6. Utilisez des opérations de chaîne puissantes

L'utilisation des opérations de chaîne de jQuery est plus efficace que la mise en cache des sélecteurs

7. Écrivez les vôtres. selector

Si vous utilisez souvent des sélecteurs dans votre code, étendez l'objet $.expr[':'] de jQuery et écrivez votre propre sélecteur.

2. Suggestions pour optimiser les opérations DOM

8. Cachez les objets jQuery

Cache les éléments que vous utilisez fréquemment

9. Lors de l'insertion dans le DOM, encapsulez tous les éléments dans un seul élément

La base L'idée ici est de créer ce que vous voulez réellement en mémoire, puis de mettre à jour le DOM. Il ne s'agit pas d'une bonne pratique jQuery, mais elle est requise pour les opérations JavaScript valides. Les opérations Direct DOM sont très lentes. Modifiez le moins possible la structure HTML.

10. Bien que jQuery ne génère pas d'exceptions, les développeurs doivent également vérifier les objets

Bien que jQuery ne génère pas un grand nombre d'exceptions aux utilisateurs, les développeurs ne doivent pas s'y fier. jQuery exécute généralement un tas de fonctions inutiles avant de déterminer si un objet existe. Ainsi, avant de faire une série de références à un objet, vous devez d'abord vérifier si l'objet existe.

11. Utilisez des fonctions directes au lieu de fonctions équivalentes

Pour de meilleures performances, vous devez utiliser des fonctions directes comme .ajax() au lieu de .ajax() au lieu de .get(),. getJSON(),.getJSON(),.getJSON(),.post(), car ces derniers appelleront $.ajax().

12. Mettez en cache les résultats de jQuery pour une utilisation ultérieure

Vous obtiendrez souvent un objet d'application javasript - vous pouvez utiliser App pour enregistrer les objets que vous sélectionnez souvent pour une utilisation future

13. ) est utilisé pour stocker le statut

N'oubliez pas d'utiliser la fonction .data() pour stocker les informations

14 Utilisez la fonction utilitaire jQuery

N'oubliez pas la fonction utilitaire jQuery simple et pratique. Mes favoris sont $.isFunction(), i s A r r a y ( ) et isArray() et isArray() et .each().

15. Ajoutez la classe "JS" au bloc HTML

Une fois jQuery chargé, ajoutez d'abord une classe appelée "JS" au HTML$('HTML').addClass('JS'); Vous ne pouvez ajouter des styles CSS que lorsque l'utilisateur a activé JavaScript.

3. Suggestions pour optimiser les performances de l'événement

16. Reporter jusqu'à (window) . load() est plus rapide que $(document).ready() car ce dernier n'attend pas que tous les éléments DOM aient été téléchargés. Vous devriez le tester avant de l'utiliser.

17. Utiliser la délégation d'événement

Lorsque vous avez de nombreux nœuds dans un conteneur et que vous souhaitez lier un événement à tous les nœuds, la délégation est très adaptée à de tels scénarios d'application. En utilisant la délégation, il nous suffit de lier l'événement au parent, puis de voir quel nœud enfant (nœud cible) a déclenché l'événement. Cela devient très pratique lorsque vous avez une table avec beaucoup de données et que vous souhaitez définir des événements sur le nœud td.

18. Utilisez l'abréviation de ready event

Si vous souhaitez compresser le plug-in js et enregistrer chaque octet, vous devez éviter d'utiliser $(document).onready()

4. Testez jQuery

19. Test unitaire jQuery

La meilleure façon de tester le code JavaScript est de demander aux gens de le tester. Mais vous pouvez utiliser certains outils automatisés tels que Selenium, Funcunit, QUit, QMock pour tester votre code (notamment les plug-ins). Je souhaite aborder ce sujet dans un autre sujet car il y a tellement de choses à dire.

20. Standardisez votre code jQuery

Standardisez souvent votre code pour voir quelle requête est la plus lente et remplacez-la. Vous pouvez utiliser la console Firebug. Vous pouvez également utiliser les fonctions de raccourci de jQuery pour faciliter les tests

5. Autres suggestions courantes d'optimisation des performances de jQuery

21. Utilisez la dernière version de jQuery

La dernière version est souvent la meilleure. Après avoir changé de version, n'oubliez pas de tester votre code. Parfois, ce n’est pas complètement rétrocompatible.

22. Utilisez HMTL5

Le nouveau standard HTML5 apporte une structure DOM plus légère. Une structure plus légère signifie que moins de parcours sont nécessaires lors de l'utilisation de jQuery et de meilleures performances de chargement. Veuillez donc utiliser HTML5 si possible.

23. Si vous souhaitez ajouter des styles à plus de 15 éléments, ajoutez des balises de style directement aux éléments du DOM

Pour ajouter des styles à quelques éléments, le meilleur moyen est d'utiliser la fonction css() de jQuey. Cependant, lors de l'ajout de styles à plus de 15 éléments, il est plus efficace d'ajouter des balises de style directement dans le DOM. Cette méthode évite d'utiliser du code en dur dans le code.

24. Évitez de charger du code redondant

C'est une bonne idée de mettre du code Javascript dans différents fichiers et de ne les charger qu'en cas de besoin. De cette façon, vous ne chargerez pas de code et de sélecteurs inutiles. Il est également facile de gérer le code.

25. Compressez dans un fichier JS principal pour minimiser le nombre de téléchargements

Lorsque vous avez déterminé quels fichiers doivent être chargés, regroupez-les dans un seul fichier. Utilisez certains outils open source pour le faire automatiquement, comme l'utilisation de Minify (intégré à votre code back-end) ou l'utilisation d'outils en ligne tels que JSCompressor, YUI Compressor ou le packer Dean Edwards JS pour compresser les fichiers pour vous. Mon préféré est JSCompressor.

26. Utilisez Javasript natif si nécessaire

Utiliser jQuery est une bonne chose, mais n'oubliez pas que c'est aussi un framework pour Javascript. Vous pouvez ainsi utiliser des fonctions Javascript natives lorsque cela est nécessaire dans le code jQuery, ce qui permet d'obtenir de meilleures performances.

27. Chargez le framework jQuery depuis Google

Lorsque votre application est officiellement lancée, veuillez charger jQuery depuis Google CDN, car les utilisateurs peuvent obtenir le code depuis l'endroit le plus proche. De cette façon, vous pouvez réduire les requêtes du serveur et si l'utilisateur accède à un autre site Web qui utilise également jQuery de Google CDN, le navigateur appellera immédiatement le code jQuery du cache.

28. Le chargement lent du contenu peut non seulement améliorer la vitesse de chargement, mais également améliorer l'optimisation du référencement. Utilisez Ajax pour charger votre site Web, ce qui peut économiser du temps de chargement côté serveur. Vous pouvez commencer avec un widget de barre latérale commun.

【Apprentissage recommandé : vidéo jQuery, développement web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!