Six meilleures pratiques jQuery pour améliorer les performances
jQuery est l'un des la les bibliothèques JavaScript les plus populaires aujourd'hui. Son API est très facile à utiliser, ce qui entraîne une courbe d'apprentissage moins abrupte. De nombreux projets utilisent le code jQuery au lieu d'utiliser directement le JavaScript vanille pour apporter des fonctionnalités dynamiques..
Mais jQuery a aussi ses défauts. Cela peut entraîner des problèmes de performances s’il est utilisé sans précaution tout comme le langage sur lequel il est basé. Cet article répertorie certaines des meilleures pratiques d’utilisation de jQuery qui nous aideront à éviter tout problème de performances..
1. Des scripts de chargement paresseux en cas de besoin
Les navigateurs exécutent JavaScript avant de créer l'arborescence DOM et de peindre les pixels à l'écran, car les scripts peuvent ajouter de nouveaux éléments à la page ou modifier la disposition ou le style de certains nœuds DOM. Donc, par donner au navigateur moins de scripts à exécuter lors du chargement de la page, nous pouvons réduire le temps qu'il faut pour la création et la peinture de l’arbre DOM final, après quoi l’utilisateur sera capable de voir la page.
Une façon de faire cela dans jQuery est d’utiliser $ .getScript charger n'importe quel fichier de script au moment de son besoin plutôt que pendant le chargement de la page.
$ .getScript ("scripts / gallery.js", rappel); C'est une fonction ajax qui permet d'obtenir un seul fichier de script quand vous le voulez, mais notez que le fichier récupéré n'est pas mis en cache. Pour activer la mise en cache pour getScript vous devrez activer la même chose pour toutes les requêtes ajax. Vous pouvez le faire en utilisant le code ci-dessous:
$ .ajaxSetup (cache: true);
2. éviter $ (fenêtre) .load () si votre script n'a besoin d'aucune sous-ressource de la page
le $ (document) .ready () est équivalent à DOMContentLoaded (où DOMContentLoaded est disponible) et $ (fenêtre) .load () à Charge. Le premier est déclenché lorsque le propre DOM d'une page est chargé, mais pas les actifs externes tels que les images et les feuilles de style. Le second est déclenché lorsque tout le contenu d’une page, y compris son propre contenu et ses sous-ressources, est chargé..
Donc, si vous écrivez un script qui s'appuie sur les sous-ressources d'une page, comme changer la couleur de fond d'un div qui est stylé par une feuille de style externe, il est préférable d'utiliser $ (fenêtre) .load ().
Mais, si ce n'est pas le cas, il vaut mieux s'en tenir à $ (document) .ready () parce que jQuery appelle son prêt gestionnaire d'événement si vous utilisez $ (document) .ready () ou non, alors utilisez-le quand vous le pouvez.
3. utiliser détacher supprimer des éléments de DOM à changer.
“Redistribuer” est un terme qui fait référence aux modifications de mise en page dans une page Web. Il s’agit de la réorganisation des éléments d’une page en fonction d’un nouvel élément, de son adaptation aux modifications structurelles d’un élément, du remplissage du vide laissé par un élément supprimé ou de toute autre action nécessitant une changement de disposition dans la page. le refusion est un coûteux processus de navigateur.
Nous pouvons réduire le non. des reflux causés par les modifications structurelles apportées à un élément en effectuant les modifications correspondantes après le sortir du flux de page et le remettre quand c'est fait. Si vous ajoutez plusieurs lignes à une table, une par une, cela provoquera beaucoup de reflux. Donc il vaut mieux sortez la table de l'arborescence DOM, ajoutez-y les lignes et remettez-la dans le DOM; cela réduira les reflux.
jQuery's détacher() permet de supprimer un élément de la page, c'est différent de retirer() car il enregistre les données associées à l'élément pour pouvoir l'ajouter ultérieurement à la page. Un élément détaché peut ensuite être replacé dans la page après modification..
4. utiliser css () définir la hauteur ou la largeur au lieu de la taille() et largeur()
Si vous définissez la hauteur ou la largeur d'un élément dans jQuery, je vous suggère d'utiliser le css () fonctionner parce que l'établissement de ces valeurs en utilisant la taille() et largeur() entraînera des redondances supplémentaires en raison de l'accès à certaines propriétés de présentation dans la fonction computeStyleTests dans jQuery (testé dans la dernière version).
Pour le code p.height ("300px"); voici les reflux.
Pour p.css ("height": "300px");
computeStyleTests est utilisé pour faire des tests de support. Il est aussi appelé pendant obtenir la hauteur et la largeur en utilisant tous les deux css () et hauteur largeur() , mais pour réglage c'est seulement appelé hauteur largeur() qui peut ne pas être nécessaire, alors utilisez css () au lieu.
5. Ne pas accéder inutilement aux propriétés de présentation
L'accès aux propriétés de mise en page telles que la hauteur, la largeur, la marge, etc. déclenchera un reflet dans la page. La raison étant que chaque fois que vous demandez au navigateur une des propriétés de la mise en page, s'assure que vous obtenez la valeur mise à jour (si la valeur a été invalidée auparavant) par recalculer les valeurs et appliquer les modifications de mise en page.
Donc, que vous utilisiez jQuery ou JavaScript vanille, méfiez-vous des propriétés de mise en page inutilement surtout dans une boucle ou par conséquent après avoir changé de style.
6. Utilisez la mise en cache là où vous le pouvez
Certaines fonctions de jQuery comportent des mécanismes de mise en cache qui peuvent être utilisés à bon escient. Les requêtes Ajax mettent les ressources en cache, mais elles ne sont pas disponibles. scénario et jsonp, donc si vous voulez mettre en cache toutes vos requêtes ajax, vous voudrez peut-être le définir globalement comme ci-dessous.
Notez également que si vous récupérez des ressources en utilisant poster il ne sera pas mis en cache même si vous activez la mise en cache avec la configuration ci-dessus.
Comme je l'ai mentionné auparavant, détacher() met en cache les données associées à l'élément à supprimer contrairement à retirer();cacher() met en cache le CSS initial afficher valeur d'un élément avant de le cacher afin qu'il puisse être restauré ultérieurement sans perdre les données.
Conclusion
Une façon de vous assurer que vous utilisez le code jQuery le plus efficace pour vos besoins est d'attendre d'avoir exécuté votre code et d'avoir remarqué s'il y avait un problème de performances ou non. S'il y a, utilisez les outils de performance et de débogage pour détecter la racine du problème.
Puisque jQuery est comme un cocon pour JavaScript avec des fonctionnalités supplémentaires pour la compatibilité et les fonctionnalités du navigateur, il peut être difficile de diagnostiquer les problèmes sans ces outils..
