Quelques suggestions pour l'optimisation des performances JQuery_jquery

Tout le monde doit savoir quelque chose sur le sujet de l'optimisation des performances jquery. Vous trouverez ci-dessous quelques informations que j'ai collectées sur l'optimisation des performances de jquery. Vous pouvez vous y référer.

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 tag pour modifier la classe (et n'oubliez pas l'ID le plus proche

) ;

3. Utiliser la sous-requête : mettre en cache l'objet parent pour une utilisation future

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

5. 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

 ;

2. Suggestions pour optimiser les opérations DOM

1. Cachez les objets jQuery : mettez en cache les éléments que vous utilisez fréquemment

2. Lors de l'insertion du DOM, encapsulez tous les éléments dans un seul élément :
L'idée de base ici est de construire ce que vous voulez vraiment 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 directes DOM sont très lentes
Les opérations directes DOM sont très lentes. Modifiez le moins possible la structure HTML.

3. Utilisez des fonctions directes au lieu de fonctions équivalentes : Pour de meilleures performances, vous devez utiliser des fonctions directes telles que $.ajax() au lieu de $.get(), $.getJSON(),$.post(), car les prochains appelleront $.ajax().

4. 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

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

1. Reportez-vous à $(window).load :
Parfois, il est plus rapide d'utiliser $(window).load() que $(document).ready() car ce dernier n'attend pas tous les éléments du DOM à charger avant la fin du téléchargement. Vous devriez le tester avant de l'utiliser.

2. 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. Obtenez d’abord la table, puis définissez les événements de délégation pour tous les nœuds td

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

　1. 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.

2. 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.

　 3. Si vous souhaitez ajouter des styles à plus de 15 éléments, ajoutez directement des balises de style aux éléments 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.

4. Évitez de charger du code redondant
C'est une bonne idée de mettre du code Javascript dans différents fichiers et de les charger uniquement 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.

5. Compressez-le dans un fichier JS principal et maintenez le nombre de téléchargements au minimum
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 pour vous, 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.

6. Utilisez Javascript 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.

7. 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.