Six meilleures pratiques de jQuery pour améliorer les performances

jQuery est l'une des bibliothèques JavaScript les plus populaires aujourd'hui. Son API est très facile à utiliser, conduisant à une courbe d'apprentissage pas trop abrupte. Beaucoup de projets utilisent le code jQuery au lieu d'utiliser directement le JavaScript de vanilla pour apporter des fonctionnalités dynamiques.

Mais jQuery a aussi ses défauts. Cela peut conduire à des problèmes de performance si vous l'utilisez avec négligence, tout comme le langage sur lequel il est basé. Cet article présente 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. Ainsi, en donnant au navigateur moins de scripts à exécuter pendant le chargement de la page, nous pouvons réduire le temps nécessaire à la création et à la peinture de l'arborescence DOM finale, après quoi l'utilisateur pourra voir la page .

Une façon de le faire dans jQuery est d'utiliser $.getScript pour charger n'importe quel fichier script au moment de son besoin plutôt que pendant le chargement de la page.

 $ .getScript ("scripts / gallery.js", callback); 

C'est une fonction ajax qui va 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. Evitez $( window ).load() si votre script n'a pas besoin de sous-ressources de la page

$( document ).ready() est équivalent à DOMContentLoaded (où DOMContentLoaded est disponible) et $( window ).load() à Load . Le premier est déclenché lorsque le DOM d'une page est chargé, mais pas les ressources externes telles que les images et les feuilles de style. Le second est déclenché lorsque tout ce dont une page est composée, y compris son propre contenu et ses sous-ressources sont chargés.

Donc, si vous écrivez un script qui repose sur les sous-ressources d'une page, comme changer la couleur d'arrière-plan d'une div qui est stylée par une feuille de style externe, il est préférable d'utiliser $( window ).load() .

Mais, si ce n'est pas le cas, il vaut mieux s'en tenir à $( document ).ready() car jQuery appelle son gestionnaire d'événement ready si vous utilisez $( document ).ready() ou non, alors utilisez-le quand vous le pouvez.

3. Utilisez detach pour supprimer les éléments du DOM qui devaient être modifiés.

"Refusion" est un terme qui se réfère aux changements de mise en page d'une page Web, c'est quand le navigateur réorganise les éléments d'une page pour s'adapter à un nouvel élément, ajuster les changements structurels d'un élément, combler une lacune cela nécessite un changement de disposition dans la page. refusion est un processus de navigateur coûteux .

Nous pouvons réduire le non. des flux provoqués par des changements structurels à un élément en effectuant les changements sur celui-ci après l' avoir sorti du flux de la page et en le remettant quand c'est fait . Si vous ajoutez plusieurs lignes à une table une par une, cela entraînera beaucoup de rediffusions. Il est donc préférable de sortir la table de l'arborescence DOM, d'y ajouter les lignes et de la replacer dans le DOM . cela réduira les remboursements.

La fonction detach() de jQuery nous permet de supprimer un élément de la page, elle est différente de remove() car elle va sauvegarder les données associées à l'élément pour le moment où il doit être ajouté à la page plus tard. Un élément détaché peut ensuite être remis dans la page lorsqu'il a été modifié.

4. Utilisez css() pour définir la hauteur ou la largeur au lieu de height() et width()

Si vous définissez la hauteur ou la largeur d'un élément dans jQuery, je vous suggère d'utiliser la fonction css() car la définition de ces valeurs à l'aide de height() et width() entraînera des rediffusions supplémentaires en raison de l'accès à certaines propriétés. fonction computeStyleTests dans jQuery (testé dans la dernière version).

Pour le code p.height("300px"); voici les remboursements.

Pour p.css({ "height": "300px"});

computeStyleTests est utilisé pour effectuer des tests de support. Il est également appelé lors de l' obtention de la hauteur et de la largeur en utilisant css() et height()/width(), mais pour le paramétrage de height()/width() qui n'est peut-être pas nécessaire, utilisez plutôt css() .

5. N'accédez pas aux propriétés de disposition inutilement

L'accès aux propriétés de disposition comme la hauteur, la largeur, la marge, etc. déclenchera la refusion dans la page. La raison en est que chaque fois que vous demandez au navigateur les propriétés de mise en page, il s'assure que vous obtenez la valeur mise à jour (au cas où la valeur a été invalidée auparavant) en recalculant les valeurs et en appliquant les changements de mise en page .

Donc, que vous utilisiez JavaScript jQuery ou vanilla, méfiez - vous d'accéder aux propriétés de disposition inutilement, en particulier dans une boucle ou par conséquent après avoir apporté des changements de style.

6. Faire usage de la mise en cache où vous pouvez

Certaines fonctions de jQuery sont livrées avec des mécanismes de mise en cache qui peuvent être mis à profit. Les requêtes Ajax mettent en cache les ressources, mais elles ne sont pas disponibles pour le script et jsonp, donc si vous voulez mettre en cache toutes vos requêtes ajax, vous pouvez vouloir le configurer globalement comme ci-dessous.

Notez également que si vous récupérez des ressources en utilisant post il ne sera pas mis en cache même si vous activez la mise en cache avec l'installation ci-dessus.

Comme je l'ai déjà mentionné, detach() met en cache les données associées à l'élément à supprimer contrairement à remove() ; hide() met en cache la valeur d' display CSS initiale d'un élément avant de le masquer afin de pouvoir le restaurer plus tard sans perdre les données.

Conclusion

Une façon de vous assurer que vous utilisez le code jQuery le plus efficace pour votre besoin est d'attendre d'avoir exécuté votre code et d'avoir remarqué s'il y a un problème de performance ou non. Si c'est le cas, utilisez les outils de performances et de débogage pour détecter la racine du problème .

Depuis jQuery est comme un cocon pour JavaScript avec des fonctionnalités supplémentaires pour les compatibilités et les fonctionnalités du navigateur, il peut être difficile de diagnostiquer les problèmes sans ces outils.