Comment démarrer rapidement avec VUE3.0 : entrez dans l'apprentissage.
Je cherchais des conseils sur l'optimisation des performances de jQuery pour alléger mon application Web dynamique et volumineuse. 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é : didacticiel vidéo jQuery]
1. Suggestions d'optimisation des performances du sélecteur
1. Héritez toujours du sélecteur #id
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 (comme $('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 du 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
pour mettre en cache les objets parents pour une utilisation future
4. Optimiser les sélecteurs pour s'adapter au modèle "de droite à gauche" de Sizzle
Depuis la version 1.3, jQuery utilise la bibliothèque Sizzle, qui est la même que les versions précédentes dans le moteur de sélection. les expressions sont très différentes. Il remplace le modèle « de droite à gauche » par un modèle « de gauche à droite ».
5.
Il est en effet plus rapide d'utiliser find() au lieu d'utiliser le contexte pour trouver la fonction find(). Mais si une page comporte de nombreux nœuds DOM, la recherche peut prendre plus de temps :
6. Utiliser 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 votre propre sélecteur
si vous utilisez souvent des sélecteurs. votre code, alors étendez l'objet $.expr[':'] de jQuery pour écrire vos propres sélecteurs.
2. Suggestions pour optimiser les opérations du DOM
8. Mettez en cache les objets jQuery et
les éléments de cache que vous utilisez souvent
9. Lors de l'insertion dans le DOM, encapsulez tous les éléments dans un seul élément.
L'idée de base ici est de créer ce que vous voulez vraiment en mémoire. puis mettez à 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 .ajax(). .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 javascript - vous pouvez utiliser App pour enregistrer les objets que vous sélectionnez souvent pour une utilisation future.
13.Utilisez
la fonction interne de jQuery data() pour stocker l'état.
oubliez 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(), isA rray() 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 pouvez ajouter des styles CSS.
3. Suggestions pour optimiser les performances des événements
16. Reportez-vous à (window). Load
utilise parfois (window).load Parfois, il utilise (window).load() que $(document).ready. .() est plus rapide car ce dernier n'attend pas que tous les éléments du DOM soient téléchargés. Vous devriez le tester avant de l'utiliser.
17. Utilisez 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 à utiliser par des personnes Venez 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, voyez 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. Utilisation de 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,
la meilleure façon d'ajouter des balises de style directement aux éléments DOM est d'utiliser la fonction css() de jQuey pour styliser quelques éléments. 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 placer le code Javascript dans différents fichiers et de ne le 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.
Une fois que 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. C'est bien d'utiliser Javascript natif lorsque cela est 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 navigue sur 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 explique comment optimiser les performances de jQuery ? Pour plus de détails sur le résumé des méthodes d'optimisation, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois pour plus d'informations !
