10 trucs et astuces JavaScript pour optimiser les performances

JavaScript est vital pour le développement Web. La langue est à l'origine de la plupart de l'interactivité et de l'animation que vous verrez sur les sites Web. Mais JavaScript peut également ralentir un site Web si le code est mal écrit. Les inefficacités peuvent entraîner à la fois des temps de chargement médiocres et une vitesse de rendu lente.

Adoptez les pratiques suivantes pour améliorer la vitesse et les performances de votre site Web.

1. Définir les variables localement

En tant que programmeur, vous devez savoir comment fonctionne la portée. Il existe deux types de variables en JavaScript: les variables locales et les variables globales.

Les variables locales sont des variables déclarées dans un bloc fonction. La portée reste dans la fonction uniquement dans laquelle ils sont déclarés. Les variables globales sont des variables accessibles dans tout le script. Dans le cas des variables globales, la portée reste tout au long du programme.

Chaque fois que vous essayez d'accéder à une variable, le navigateur effectue une recherche de portée. Il vérifie la portée la plus proche de la variable et continue de rechercher jusqu'à ce qu'il trouve la variable. Ainsi, plus vous avez de chaîne de portée dans votre programme, plus il faudra de temps pour accéder aux variables au-delà de la portée actuelle.

Pour cette raison, il est préférable de toujours définir vos variables plus près du contexte d'exécution. N'utilisez les variables globales qu'en de rares occasions; lorsque vous souhaitez stocker des données utilisées tout au long du script, par exemple. Cela réduira le nombre de portées dans votre programme, améliorant ainsi les performances.

2. Charger JavaScript de manière asynchrone

JavaScript est un langage de programmation monothread. Cela signifie qu'une fois qu'une fonction s'exécute, elle doit s'exécuter jusqu'à la fin avant qu'une autre fonction puisse s'exécuter. Cette architecture peut conduire à des situations dans lesquelles le code peut bloquer le thread et geler l'application.

Pour que le thread continue de fonctionner correctement, vous devez exécuter certaines tâches chronophages de manière asynchrone. Lorsqu'une tâche s'exécute de manière asynchrone, elle ne consomme pas toute la puissance de traitement du thread. Au lieu de cela, la fonction rejoint une file d'attente d'événements où elle est déclenchée après l'exécution de tous les autres codes.

Les appels d'API sont parfaits pour le modèle asynchrone car leur résolution prend du temps. Ainsi, au lieu de le faire tenir le thread, vous utiliseriez une bibliothèque basée sur des promesses comme l'API de récupération pour récupérer les données de manière asynchrone. De cette façon, un autre code peut s'exécuter pendant que le navigateur récupère les données de l'API.

Comprenez les subtilités de la programmation asynchrone et vous améliorerez les performances de votre application.

3. Évitez les boucles inutiles

Utiliser des boucles en JavaScript peut être coûteux si vous ne faites pas attention. Faire défiler une collection d'éléments peut mettre beaucoup de pression sur le navigateur.

Bien que vous ne puissiez certainement pas éviter les boucles dans votre code, vous devez y travailler le moins possible. Vous pouvez utiliser d'autres techniques qui évitent d'avoir à parcourir la collection.

Par exemple, vous pouvez stocker la longueur d'un tableau dans une variable différente, plutôt que de la lire à chaque itération de la boucle. Si vous obtenez ce que vous voulez d'une boucle, sortez-en immédiatement.

4. Minifier le code JavaScript

La minification est une méthode efficace pour optimiser le code JavaScript. Un minimiseur transforme votre code source brut en un fichier de production plus petit. Ils suppriment les commentaires, suppriment la syntaxe inutile et raccourcissent les noms de variables longs. Ils suppriment également le code inutilisé et optimisent les fonctions existantes pour occuper moins de lignes.

Des exemples de minimiseur sont Google Closure Compiler, UglifyJS et Microsoft AJAX minifier. Vous pouvez également minifier manuellement votre code en l'inspectant et en recherchant des moyens de l'optimiser. Par exemple, vous pouvez simplifier les instructions if dans votre code.

5. Compresser de gros fichiers avec Gzip

La plupart des clients utiliser Gzip pour compresser et décompresser gros fichiers JavaScript. Lorsqu'un navigateur demande une ressource, le serveur peut la compresser pour renvoyer un fichier plus petit dans la réponse. Lorsque le client reçoit le fichier, il le décompresse. Dans l'ensemble, cette approche économise la bande passante et réduit la latence, améliorant ainsi les performances des applications.

6. Minimiser l'accès au DOM

L'accès au DOM peut avoir un impact sur les performances de votre application car le navigateur doit s'actualiser à chaque mise à jour du DOM. Il est préférable de limiter l'accès DOM à la fréquence la plus faible possible. Une façon de procéder consiste à stocker des références aux objets du navigateur.

Vous pouvez également utiliser une bibliothèque comme React qui apporte des modifications au DOM virtuel avant de les pousser vers le vrai DOM. Par conséquent, le navigateur met à jour les parties de l'application qui doivent être mises à jour, au lieu d'actualiser toute la page.

7. Différer le chargement inutile de JavaScript

Bien qu'il soit essentiel que votre page se charge à temps, toutes les fonctions n'ont pas besoin de fonctionner lors du chargement initial. Supposons que vous disposiez d'un bouton cliquable et d'un menu à onglets faisant référence au code JavaScript; vous pouvez différer les deux jusqu'au chargement de la page.

Cette méthode libère de la puissance de traitement, vous permettant de rendre les éléments de page nécessaires à temps. Vous retardez la compilation du code susceptible de contenir l'affichage initial de la page. Ensuite, une fois la page chargée, vous pouvez commencer à charger les fonctionnalités. De cette façon, l'utilisateur peut profiter d'un temps de chargement rapide et commencer à interagir avec les éléments à temps.

Vous pouvez également inclure la plus petite quantité de CSS et de JavaScript dans votre élément head, afin qu'il se charge immédiatement. Le code secondaire peut alors vivre dans des fichiers .css et .js séparés. Cette technique nécessite une bonne connaissance comment fonctionne le DOM.

8. Utiliser un CDN pour charger JavaScript

L'utilisation d'un réseau de diffusion de contenu permet d'accélérer le temps de chargement des pages, mais ce n'est pas toujours efficace. Par exemple, si vous choisissez un CDN sans serveur local dans le pays d'un visiteur, il n'en bénéficiera pas.

Pour résoudre ce problème, vous pouvez utiliser des outils pour comparer plusieurs CDN et décider lequel offre les meilleures performances pour votre cas d'utilisation. Pour savoir quel CDN convient le mieux à votre bibliothèque, consultez le cdnjs site Internet.

9. Supprimer les fuites de mémoire

Les fuites de mémoire peuvent avoir un impact négatif sur les performances d'une application. Les fuites se produisent lorsque la page chargée occupe de plus en plus de mémoire.

Un exemple de fuite de mémoire est lorsque votre navigateur commence à ralentir après une longue session de travail avec l'application.

Vous pouvez utiliser les outils de développement Chrome pour détecter les fuites de mémoire dans votre application. L'outil enregistre la chronologie dans l'onglet Performances. De nombreuses fuites de mémoire se produisent à la suite de la suppression d'éléments DOM. Le ramasse-miettes ne libérera de la mémoire que lorsque toutes les variables faisant référence à ces éléments seront hors de portée.

Des outils comme Lighthouse, Google PageSpeed ​​Insights et Chrome peuvent vous aider à détecter les problèmes. Lighthouse vérifie les problèmes d'accessibilité, de performances et de référencement. Google PageSpeed ​​peut vous aider à optimiser JavaScript pour améliorer les performances de votre application.

Le navigateur Chrome fournit une fonctionnalité Outils de développement que vous pouvez basculer en cliquant sur F12 sur votre mot-clé. Vous pouvez utiliser son analyse des performances pour activer et désactiver le réseau et vérifier la consommation du processeur. Il vérifie également d'autres mesures pour découvrir les problèmes affectant votre site Web.

En tant que développeur Web, vous allez beaucoup travailler dans votre navigateur Web. La plupart des navigateurs sont livrés avec une suite d'outils de développement pour vous aider à résoudre les problèmes de site Web. La fonctionnalité Google Chromes Developer Tools propose de nombreuses fonctions pour vous aider.