Défis Suivi des applications ReactJS

ReactJS combine la vitesse de JavaScript avec des capacités de rendu uniques pour créer des applications très dynamiques, axées sur les performances et sensibles aux entrées des utilisateurs. Le rapport 2018 de State of JS cite la performance comme la principale raison pour laquelle ReactJS a gagné autant de popularité en si peu de temps. Lorsqu’il s’agit d’options de création d’applications d’une seule page (ASP), React offre des avantages de performances par rapport aux frameworks et bibliothèques JavaScript angulaires et autres. Étant donné que React maintient un DOM virtuel dans JavaScript, il peut rapidement déterminer les modifications minimales nécessaires pour amener le document à l’état désiré. Étant donné que l’état d’un composant React est enregistré dans JavaScript, vous pouvez éviter d’accéder au DOM. Pour les petites applications, les optimisations de performances que ReactJS offre sont plus que suffisantes. Toutefois, au fur et à mesure que vos applications évoluent pour inclure des vues plus complexes, le maintien et la parallélisation de DOM virtuels peuvent devenir une affaire coûteuse. Une grande application est énorme, ram ram ram ramé et compliqué arbre de rendu. Chaque fois que vous mettez à jour les accessoires sur un nœud, React doit reconfigurer l’arbre de rendu à partir du nœud tout le long des branches et, enfin, la feuille, où les comparaisons DOM virtuelles ont lieu. Néanmoins, à mesure que la base d’utilisateurs augmente, une application a tendance à se développer dans les complexités, à transporter plus de dépendances et à intégrer davantage de plugins tiers. Sa probabilité de heurter des goulots d’étranglement de performance ne fait qu’augmenter. Multipliez cela avec un nombre sans cesse croissant d’applications sur des millions d’appareils web de différentes tailles et types et vous ne pouvez pas échapper à un cauchemar de performances potentielles en fin de compte. Par exemple, les utilisateurs s’attendent à 60 images par seconde lors de l’interaction avec une application Web dans le navigateur, ce qui vous donne seulement 16,7 ms pour rendre chaque image. Lorsque votre application est lente, il faut souvent trop de temps pour répondre aux événements utilisateur, ce qui prend trop de temps pour traiter les données ou pour re-rendre les nouvelles données. Dans la majorité des cas, vous ne traitez pas des données complexes sur Clock — vous perdez du temps à redédir. Sans aucun doute, même l’application React la plus parfaitement conçue et optimisée nécessite un outil de surveillance des performances.  

Montages de composants de surveillance avec Profiler

Le nombre de fois que les composants rede rendent, ainsi que la quantité de ressources et de temps nécessaires, peuvent en dire long sur les performances de votre application React en production. Le composant Profiler est un composant React intégré qui mesure l’heure de « montage » ou de « mise à jour » d’un sous-traitement de composant. chaque fois qu’un composant est mis à jour ou monté, la fonction onRender de Profiler est horodatée. Profiler offre un moyen accessible de visualiser les problèmes dans les applications React.  

import { unstable_Profiler as Profiler } from "react"

<Profiler id="Counter" onRender={callback}>

    <Counter />

</Profiler>

  L’accessoire id identifie les rapports, tandis que la fonction onRender est associée à des arguments lorsque le composant Compteur est monté ou révisé.  

function callback(id, phase, actualTime, baseTime, startTime, commitTime) {

log("id: " + id, "phase:" + phase, "actualTime:" + actualTime,   "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " +  commitTime)

}

  Les arguments de la fonction sont recueillis des horodatages du moment où le composant Compteur a été rendu. Nous examinerons chacun des paramètres.   id. L’ID unique associé au composant Profiler. phase. Cela détecte la phase que ce soit en phase de « montage » ou de « mise à jour ». actualTime. Le temps pris par Profiler pour rendre les mises à jour engagées. baseTime. Le temps pris par l’un des composants de l’arbre Profiler pour monter ou mettre à jour. startTime. Enregistre l’horodatage Profiler commence à mesurer le temps de montage / rendu pour ses descendants. commitTime. Le temps que React a pris pour valider une mise à jour.  

Surveillance des composants qui sont rendus à nouveau à l’aide d’outils de développeur react

Pendant le développement, si vous apprenez quel composant est redis rendu, il peut enregistrer votre application en production à partir de différents goulots d’étranglement de performance. React Developer Tools rendre cela simple pour le développeur en colorant les limites des composants, chaque fois qu’ils sont re-rendu. Si vos principaux composants se re-rendent, les bords qui capturent les composants Counter et Count seront brièvement mis en surbrillance. Le type de couleur qui apparaît dépend de la fréquence/fréquence à laquelle un composant est rendu, vous donnant la possibilité d’identifier facilement les mises à jour des composants les plus fréquemment afin que vous puissiez l’optimiser de manière appropriée.   | vert – mise à jour basse fréquence | bleu – mise à jour moyenne de fréquence v rouge – dénote une mise à jour très fréquente  

Identification des problèmes perf avec React.addons.Perf

Pour démarrer Perf, vous devez appeler Perf.start () depuis la console, enregistrer l’action et appeler Perf.stop() pour arrêter Perf. Ensuite, vous pouvez appeler l’une des méthodes suivantes pour afficher des ensembles de mesures utiles.

Perf.printWasted()

Perf.printWasted() est la méthode la plus utile que vous appelez sur React.addons.Perf. Perf.printWasted()vous indique la quantité de temps perdu à contracter rendre l’arbre et de comparer les DOM virtuels les uns avec les autres. Ces composants sont mentionnés ci-dessus sont des candidats de choix pour améliorer les performances de votre application React.  

Perf.printInclusive() / Perf.printExclusive()

Perf.printInclusive () et Perf.printExclusive () retournent le temps qu’il s’est approprié pour rendre vos composants. La plupart des développeurs ne trouveront pas cette méthode très utile, car les problèmes de performances déclenchés par le rendu sont normalement résolus en ne rendant pas en utilisant la méthode ci-dessus: Perf.printWasted(). Toutefois, la méthode peut vous aider à identifier les composants qui effectuent des calculs lourds dans les méthodes du cycle de vie. Vous apprendrez qu’après avoir corrigé les problèmes printWasted, c’est votre code d’application non optimisé qui accapare ces précieuses ressources. Alternativement, vous pouvez apporter le profiler JavaScript de Chrome DevTool standard et jeter un oeil aux appels de fonction les plus lourds directement.  

Perf.printDOM()

Perf.printDOM() affiche toutes les opérations DOM déclenchées lors du rendu des arbres React. Si vous jouez avec ReactJS depuis un certain temps, alors vous savez que c’est peut-être la partie la plus lourde. Pour parcourir une liste infinie de lignes et de colonnes si votre application est assez complexe, peut prendre l’éternité pour détecter ce qui a exactement mal tourné. Une fois que votre premier ensemble de composants est rendu, vous vous attendez à ce que les futurs re-rendus réutilisent les nœuds DOM existants et ne créent pas de nœuds frais – une optimisation offerte par le DOM virtuel de React et prise en compte par chaque développeur React. Perf.printDOM() est pratique pour trouver des bizarreries particulières et coûteuses du navigateur ou pour surveiller les modifications majeures et imprévisibles des DOM.  

Surveillance synthétique des applications Web ReactJS

Bien que les méthodes mentionnées ci-dessus font partie intégrante de la surveillance des performances d’une application React, elles ne parviennent pas à imiter les actions qu’un utilisateur type effectue lors de l’utilisation de l’application. Une plate-forme de surveillance synthétique, combinée à un enregistreur de scripts, peut exécuter et rejouer des scripts préenregistrés, simulant des transactions utilisateur et des actions utilisateur typiques dans un navigateur réel. Par exemple, navigation de base, soumissions de formulaires, transactions de paniers d’achat, jeux en ligne, vitesse de défilement, animations, etc. Bien que Perf soit un excellent outil pour surveiller le temps perdu dans le rendu de l’arbre et la comparaison dom virtuel avec DOM réel, il ne se traduit pas par ce que les utilisateurs peuvent éprouver lors de l’utilisation de l’application. Les solutions synthétiques de surveillance des applications Web, comme ceux offerts par Dotcom-Monitor, consistent en un outil de script facile à utiliser pour écrire vos différents scripts de test de surveillance. Ces scripts peuvent s’exécuter dans un environnement de test privé et vérifient votre application Web pour différents paramètres à intervalles réguliers. L’utilisation d’un outil de surveillance synthétique qui utilise de vrais navigateurs vous permet d’obtenir les résultats de performances les plus précis. En outre, la surveillance synthétique peut être exécutée à l’aide de différents appareils, navigateurs et emplacements géographiques. Avec les applications d’une seule page, la vitesse initiale de chargement de la page n’est pas aussi importante que l’expérience de l’utilisateur final. Non seulement il est essentiel de s’assurer que vos applications sont en marche, mais les fonctionnalités doivent également être surveillées. Par exemple, les utilisateurs peuvent-ils effectuer les actions nécessaires et quels sont, le cas échéant, les services tiers ou les API qui causent des retards ou des problèmes. L’objectif de la surveillance des applications Web est d’automatiser le processus d’identification des problèmes avant qu’ils n’affectent un plus grand nombre d’utilisateurs. Avec la surveillance synthétique, vous pouvez configurer des alertes en fonction des exigences de votre application React spécifique, et être averti immédiatement lorsque quelque chose ne va pas. Contrairement aux autres outils mentionnés ci-dessus, la surveillance synthétique adopte une approche proactive, vous libérant du processus fastidieux de vous et de votre équipe devant exécuter des tests manuels.  

Suivi des applications ReactJS : Conclusion

Bien que ces outils soient utiles pour surveiller vos applications React dans les environnements de développement, la surveillance des performances en production est un défi d’une autre ampleur et a plus de poids. Céder à la mentalité «fonctionne sur ma machine» est une mise en garde lorsque la performance de votre application en production est en jeu. Les outils de surveillance synthétique, d’autre part, vous donnent des rapports de performance du point de vue de l’utilisateur final, et non de certains cas de test cliché imaginés par les développeurs. Néanmoins, si vous cherchez à niveler votre surveillance des performances ReactJS, obtenez un essai gratuit de 30 jours de Dotcom-Monitor aujourd’hui .