12 conseils pour améliorer les performances des applications JavaScript

Les performances sont l'un des problèmes les plus importants auxquels sont confrontés les développeurs Web ou les applications Web. Personne ne sera satisfait d'une application ou d'une page qui se charge depuis des siècles et qui se bloque à cause d'une charge excessive. Les utilisateurs du site Web ne sont pas prêts à attendre trop longtemps pour leurs téléchargements ou à mettre leurs pages en état de marche. Selon Kissmetrics , 47% des visiteurs s'attendent à ce qu'un site Web se charge en moins de 2 secondes. 40% des visiteurs quitteront le site s'il faut plus de 3 secondes pour le charger.



L'auteur du matériel, dont nous publions la traduction aujourd'hui, dit que, compte tenu des chiffres ci-dessus, il devient clair que la performance est quelque chose dont les développeurs Web doivent toujours se souvenir. Voici 12 conseils pour améliorer les performances des projets JS.

1. Utilisez des mécanismes de mise en cache du navigateur

Il existe deux façons principales de mettre en cache des données à l'aide de navigateurs. Le premier est l'utilisation de l'API JavaScript JavaScript Cache, qui est gérée par les techniciens de service. Le second est un cache HTTP standard.

Les scripts sont souvent utilisés pour organiser l'accès à certains objets. Si vous stockez une référence à un objet auquel vous devez souvent accéder dans une variable, et également si vous utilisez cette variable dans des opérations répétées qui nécessitent l'accès à l'objet, vous pouvez améliorer les performances du code.

2. Optimisez le code pour les environnements dans lesquels il s'exécutera

Afin d'évaluer correctement les améliorations apportées au programme, il est recommandé de former un ensemble d'environnements dans lesquels des mesures peuvent être effectuées.

En pratique, vous ne pourrez pas effectuer de recherche sur les performances du code, par exemple, dans toutes les versions existantes des moteurs JS, ni optimiser le code pour tous les environnements dans lesquels il peut s'exécuter. Mais il convient de noter que le test de code dans un seul environnement n'est pas non plus la meilleure pratique. Une telle approche peut donner des résultats déformés. Par conséquent, il est important de créer un ensemble d'environnements dans lesquels le code s'exécutera très probablement et de tester des projets dans ces environnements.

3. Débarrassez-vous du code JS inutilisé

En supprimant le code inutilisé du projet, non seulement le temps de chargement du navigateur pour les scripts sera amélioré, mais également le temps nécessaire aux navigateurs pour analyser et compiler le code. Afin de vous débarrasser du code inutilisé, vous devez faire attention aux fonctionnalités du projet. Donc, si vous trouvez des fonctionnalités avec lesquelles les utilisateurs ne travaillent pas, envisagez de les supprimer du projet et, en même temps, pensez au code JS qui lui est associé. En conséquence, le site se chargera plus rapidement, il sera plus rapide de se préparer au travail dans le navigateur. Cela aura un effet bénéfique sur les impressions que les utilisateurs connaîtront avec le site. Lors de l'analyse d'un projet, gardez à l'esprit que, par exemple, une certaine bibliothèque incluse dans sa composition peut y être incluse par erreur. Il peut très bien ne pas y être utilisé. Cela vaut la peine de s'en débarrasser. Il en va de même pour l'utilisation de certaines dépendances qui implémentent ce qui est déjà implémenté dans les navigateurs modernes. Par conséquent, le passage aux fonctionnalités de navigateur standard dupliquées par cette dépendance aidera à éliminer le code inutile.

4. Économisez de la mémoire

Il est important de veiller à ce que les projets Web utilisent uniquement cette mémoire, sans laquelle ils sont absolument incapables de le faire. Le fait est qu'un développeur ne peut pas savoir à l'avance la quantité de mémoire accessible par son application sur un certain appareil. Si l'application utilise de manière injustifiée de grandes quantités de mémoire, cela crée une charge accrue sur les mécanismes de gestion de la mémoire du moteur JS du navigateur. En particulier, cela s'applique au garbage collector. Les appels fréquents à la récupération de place ralentissent les programmes. Cela affecte négativement l'utilisabilité du projet.

5. Utilisez des mécanismes de chargement différé pour les scripts mineurs

Les utilisateurs souhaitent que les pages Web se chargent le plus rapidement possible. Mais il est peu probable que l'intégralité du code JS du projet soit nécessaire pour l'affichage initial de la page. Si un utilisateur doit effectuer une action pour activer un certain code (par exemple, cliquer sur un élément ou accéder à un onglet de l'application), le chargement de ce code peut être reporté après l'avoir terminé après le chargement initial de la page et les ressources les plus importantes.

Avec cette approche, vous pouvez éviter le chargement du navigateur et la compilation d'une grande quantité de code JS au tout début, c'est-à-dire éviter de ralentir la sortie de la page causée par la nécessité d'effectuer ces opérations. Une fois le téléchargement de tous les plus importants terminé, vous pouvez commencer à télécharger du code supplémentaire. Par conséquent, lorsque l'utilisateur a besoin de ce code, il sera déjà à sa disposition. Selon le modèle RAIL , Google recommande d'exécuter des sessions de script de chargement paresseux d'une durée d'environ 50 ms. Avec cette approche, les opérations de chargement de code n'affecteront pas l'interaction de l'utilisateur avec la page.

6. Évitez les fuites de mémoire

Si une fuite de mémoire se produit dans votre application, la page chargée demandera de plus en plus de mémoire au navigateur. Par conséquent, la consommation de mémoire de cette page peut atteindre un niveau tel qu'elle affectera négativement les performances de l'ensemble du système. Vous-même avez probablement fait face à un problème similaire (et vous ne l'avez probablement pas aimé). Il est possible que la page sur laquelle il y avait une fuite de mémoire contienne une sorte de visionneuse d'images - comme un curseur ou un "carrousel".

À l'aide des outils de développement Chrome, vous pouvez analyser votre site pour détecter les fuites de mémoire. Cela se fait en examinant les indicateurs à l'aide de l'onglet Performances. En règle générale, les fuites de mémoire proviennent de fragments DOM supprimés de la page, mais liés à certaines variables. Cela empêche le garbage collector d'effacer la mémoire occupée par les données dans des fragments DOM inutiles.

7. Si vous devez faire de l'informatique lourde, utilisez des travailleurs Web

À partir des matériaux de la ressource MDN, vous pouvez découvrir que les travailleurs Web vous permettent d'exécuter du code dans un thread d'arrière-plan distinct du thread principal de l'application Web. L'avantage de cette approche est que les calculs lourds peuvent être effectués dans un thread séparé. Cela permet au thread principal (généralement responsable de la maintenance de l'interface utilisateur) de s'exécuter sans blocage ni ralentissement.

Les travailleurs Web vous permettent d'effectuer des calculs qui utilisent le processeur de manière intensive, sans bloquer le flux de l'interface utilisateur. Cette technologie vous permet de créer de nouveaux threads et de leur confier des tâches, ce qui a un effet bénéfique sur les performances des applications. Avec cette approche, les tâches dont l'exécution est longue ne bloquent pas l'exécution d'autres tâches. Lorsque vous effectuez des tâches similaires dans le thread principal, d'autres tâches sont bloquées.

8. Si vous accédez à l'élément DOM plusieurs fois, enregistrez le lien vers celui-ci dans une variable

Obtenir une référence à un élément DOM est une opération lente. Si vous allez accéder à un élément plusieurs fois, il est préférable d'enregistrer un lien vers celui-ci dans une variable locale. Mais ici, il est important de se rappeler que si l'élément, dont le lien est stocké dans la variable, est supprimé ultérieurement du DOM, vous devez supprimer le lien vers celui-ci de la variable. Par exemple, vous pouvez le faire en écrivant null dans une variable. Cela évitera les fuites de mémoire.

9. Efforcez-vous de déclarer les variables dans la même portée dans laquelle elles seront utilisées.

JavaScript, lorsque vous essayez d'accéder à une variable, la recherche d'abord dans la portée locale. S'il n'y apparaît pas, la recherche se poursuit dans la portée, dans laquelle la portée locale est incorporée. Cela se produit jusqu'à ce que les variables globales soient vérifiées. L'enregistrement de variables dans des étendues locales accélère leur accès.

Essayez, sans besoin particulier, de ne pas utiliser le mot-clé var lors de la déclaration des variables. Utilisez plutôt les mots clés let et const pour déclarer respectivement les variables et les constantes. Ils diffèrent par la portée des blocs et certaines autres fonctionnalités utiles. Faites attention à l'utilisation des variables dans les fonctions, en essayant de vous assurer que les variables auxquelles vous accédez à l'intérieur de la fonction lui sont locales. Soyez conscient des problèmes que la déclaration implicite de variables globales peut provoquer.

10. Essayez de ne pas utiliser de variables globales

Les variables globales existent pendant toute la durée d'exécution du script. Les variables locales sont détruites lorsque la portée locale est détruite. Par conséquent, les variables globales ne doivent être utilisées que lorsque cela est vraiment nécessaire.

11. Appliquez des optimisations de code JavaScript que vous appliqueriez à des programmes écrits dans d'autres langues

• Utilisez toujours des algorithmes avec la plus petite complexité de calcul possible, résolvez les problèmes en utilisant des structures de données optimales.
• Optimisez les algorithmes utilisés pour obtenir les mêmes résultats avec moins de calculs.
• Évitez les appels récursifs.
• Concevez des éléments informatiques répétitifs en tant que fonctions.
• Simplifiez les calculs mathématiques.
• Utilisez des tableaux de recherche au lieu des constructions switch / case.
• Efforcez-vous de faire en sorte que les conditions vérifiées dans les constructions conditionnelles prennent plus souvent de vraies valeurs. Cela contribue à une utilisation plus efficace des capacités du processeur pour une exécution proactive des instructions.
• Si vous avez la possibilité d'utiliser des opérateurs au niveau du bit pour effectuer certaines actions, procédez comme suit. Effectuer de tels calculs nécessite moins de ressources processeur.

12. Utiliser des outils de recherche sur les performances des applications

Pour explorer divers aspects des projets Web, l'outil Lighthouse peut être recommandé. Il évalue l'application en fonction des indicateurs suivants: Performance, Progressive Web App, Accessibilité, Meilleures pratiques, SEO. Le phare donne non seulement des notes, mais donne également des recommandations pour améliorer le projet. Un autre outil d'analyse de la productivité, Google PageSpeed , a été créé pour aider les développeurs à explorer leurs sites et à voir comment ils peuvent s'améliorer.

Lighthouse et PageSpeed ​​ne sont pas tous deux des outils parfaits, mais leur utilisation permet de voir les problèmes qui, à première vue, peuvent se révéler invisibles.

Dans le menu Chrome, vous pouvez trouver la commande qui ouvre le gestionnaire de tâches. Il affiche des informations sur les ressources système utilisées par les onglets de navigateur ouverts. Vous pouvez obtenir des informations plus détaillées sur ce qui se passe sur la page en ouvrant l'onglet Performances des outils de développement Chrome (d'autres navigateurs ont des outils similaires). Cet onglet vous permet d'analyser de nombreux indicateurs liés aux performances du site.


Onglet Performances dans Chrome Developer Tools

Lors de la collecte d'informations sur les performances des pages à l'aide de Chrome, vous pouvez configurer les ressources de processeur et de réseau disponibles pour les pages, ce qui vous permet d'identifier et de résoudre les problèmes.


Analyse des performances des pages Chrome

Afin d'analyser le site plus en profondeur, vous pouvez utiliser l'API Navigation Timing. Il vous permet de mesurer divers indicateurs directement dans le code d'application.

Si vous développez des projets côté serveur à l'aide de JavaScript à l'aide de Node.js, vous pouvez utiliser la plate-forme NodeSource pour une analyse approfondie de vos applications. Les mesures prises par les outils de cette plateforme ont peu d'impact sur le projet. Dans l'environnement Node.js, comme dans le navigateur, de nombreux problèmes peuvent survenir - comme les mêmes fuites de mémoire. L'analyse des projets basée sur Node.js permet d'identifier et de résoudre les problèmes de performances.

Résumé

Il est important de maintenir un équilibre entre l'optimisation du code et la lisibilité. Le code est interprété par un ordinateur, mais les gens doivent le supporter. Par conséquent, le code doit être compréhensible non seulement pour l'ordinateur, mais aussi pour les humains.

En outre, il est utile de se rappeler que les performances doivent toujours être prises en compte, mais cela ne doit pas être plus important que d'assurer un fonctionnement sans erreur du code et de mettre en œuvre les capacités des applications dont les utilisateurs ont besoin.

Chers lecteurs! Comment optimisez-vous vos projets JS?