{"id":13560,"date":"2021-04-01T15:12:51","date_gmt":"2021-04-01T15:12:51","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2021\/04\/01\/defis-suivi-des-applications-reactjs\/"},"modified":"2026-06-15T02:46:11","modified_gmt":"2026-06-15T02:46:11","slug":"defis-suivi-des-applications-reactjs","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/defis-suivi-des-applications-reactjs\/","title":{"rendered":"D\u00e9fis Suivi des applications ReactJS"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tReactJS combine la vitesse de JavaScript avec des capacit\u00e9s de rendu uniques pour cr\u00e9er des applications tr\u00e8s dynamiques, ax\u00e9es sur les performances et sensibles aux entr\u00e9es des utilisateurs. \nLe rapport 2018 de State of JS<\/a>\n<\/span> cite la performance comme la principale raison pour laquelle ReactJS a gagn\u00e9 autant de popularit\u00e9 en si peu de temps. Lorsqu\u2019il s\u2019agit d\u2019options de cr\u00e9ation d\u2019applications d\u2019une seule page (ASP), React offre des avantages de performances par rapport aux frameworks et biblioth\u00e8ques JavaScript angulaires et autres. \u00c9tant donn\u00e9 que React maintient un DOM virtuel dans JavaScript, il peut rapidement d\u00e9terminer les modifications minimales n\u00e9cessaires pour amener le document \u00e0 l\u2019\u00e9tat d\u00e9sir\u00e9. \u00c9tant donn\u00e9 que l\u2019\u00e9tat d\u2019un composant React est enregistr\u00e9 dans JavaScript, vous pouvez \u00e9viter d\u2019acc\u00e9der au DOM.\n\nPour les petites applications, les optimisations de performances que ReactJS offre sont plus que suffisantes. Toutefois, au fur et \u00e0 mesure que vos applications \u00e9voluent pour inclure des vues plus complexes, le maintien et la parall\u00e9lisation de DOM virtuels peuvent devenir une affaire co\u00fbteuse. Une grande application est \u00e9norme, ram ram ram ram\u00e9 et compliqu\u00e9 arbre de rendu. Chaque fois que vous mettez \u00e0 jour les accessoires sur un n\u0153ud, React doit reconfigurer l\u2019arbre de rendu \u00e0 partir du n\u0153ud tout le long des branches et, enfin, la feuille, o\u00f9 les comparaisons DOM virtuelles ont lieu.\n\nN\u00e9anmoins, \u00e0 mesure que la base d\u2019utilisateurs augmente, une application a tendance \u00e0 se d\u00e9velopper dans les complexit\u00e9s, \u00e0 transporter plus de d\u00e9pendances et \u00e0 int\u00e9grer davantage de plugins tiers. Sa probabilit\u00e9 de heurter des goulots d\u2019\u00e9tranglement de performance ne fait qu\u2019augmenter. Multipliez cela avec un nombre sans cesse croissant d\u2019applications sur des millions d\u2019appareils web de diff\u00e9rentes tailles et types et vous ne pouvez pas \u00e9chapper \u00e0 un cauchemar de performances potentielles en fin de compte.\n\nPar exemple, les utilisateurs s\u2019attendent \u00e0 60 images par seconde lors de l\u2019interaction 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\u00e9pondre aux \u00e9v\u00e9nements utilisateur, ce qui prend trop de temps pour traiter les donn\u00e9es ou pour re-rendre les nouvelles donn\u00e9es. Dans la majorit\u00e9 des cas, vous ne traitez pas des donn\u00e9es complexes sur Clock \u2014 vous perdez du temps \u00e0 red\u00e9dir.\n\nSans aucun doute, m\u00eame l\u2019application React la plus parfaitement con\u00e7ue et optimis\u00e9e n\u00e9cessite un outil de surveillance des performances.\n\n \n

Montages de composants de surveillance avec Profiler<\/h2>\nLe nombre de fois que les composants rede rendent, ainsi que la quantit\u00e9 de ressources et de temps n\u00e9cessaires, peuvent en dire long sur les performances de votre application React en production. Le composant Profiler est un composant React int\u00e9gr\u00e9 qui mesure l\u2019heure de \u00ab montage \u00bb ou de \u00ab mise \u00e0 jour \u00bb d\u2019un sous-traitement de composant. chaque fois qu\u2019un composant est mis \u00e0 jour ou mont\u00e9,<\/span> <\/span>la fonction onRender de Profiler est<\/em> horodat\u00e9e. Profiler offre un moyen accessible de visualiser les probl\u00e8mes dans les applications React.\n\n \n
import { unstable_Profiler as Profiler } from \"react\"\n\n<Profiler id=\"Counter\" onRender={callback}>\n\n    <Counter \/>\n\n<\/Profiler><\/pre>\n \n\nL\u2019accessoire<\/em> id identifie les rapports, tandis que la fonction onRender<\/em> est associ\u00e9e \u00e0 des arguments lorsque le composant<\/em> Compteur est mont\u00e9 ou r\u00e9vis\u00e9.\n\n \n
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {\n\nlog(\"id: \" + id, \"phase:\" + phase, \"actualTime:\" + actualTime,   \"baseTime: \" + baseTime, \"startTime: \" + startTime, \"commitTime: \" +  commitTime)\n\n}<\/pre>\n \n\nLes arguments de la fonction sont recueillis des horodatages du moment o\u00f9 le composant Compteur<\/em> a \u00e9t\u00e9 rendu. Nous examinerons chacun des param\u00e8tres.\n\n \n\nid<\/strong>. L\u2019ID unique associ\u00e9 au composant Profiler.\n\nphase<\/strong>. Cela d\u00e9tecte la phase que ce soit en phase de \u00ab montage \u00bb ou de \u00ab mise \u00e0 jour \u00bb.\n\nactualTime<\/strong>. Le temps pris par Profiler pour rendre les mises \u00e0 jour engag\u00e9es.\n\nbaseTime<\/strong>. Le temps pris par l\u2019un des composants de l\u2019arbre Profiler pour monter ou mettre \u00e0 jour.\n\nstartTime<\/strong>. Enregistre l\u2019horodatage Profiler commence \u00e0 mesurer le temps de montage \/ rendu pour ses descendants.\n\ncommitTime<\/strong>. Le temps que React a pris pour valider une mise \u00e0 jour.\n\n \n
Surveillance des composants qui sont rendus \u00e0 nouveau \u00e0 l\u2019aide d\u2019outils de d\u00e9veloppeur react<\/h2>\nPendant le d\u00e9veloppement, si vous apprenez quel composant est redis rendu, il peut enregistrer votre application en production \u00e0 partir de diff\u00e9rents goulots d\u2019\u00e9tranglement de performance. React Developer Tools rendre cela simple pour le d\u00e9veloppeur en colorant les limites des composants, chaque fois qu\u2019ils sont re-rendu. Si vos principaux composants se re-rendent, les bords qui capturent les composants Counter<\/em> et Count<\/em> seront bri\u00e8vement mis en surbrillance.\n\nLe type de couleur qui appara\u00eet d\u00e9pend de la fr\u00e9quence\/fr\u00e9quence \u00e0 laquelle un composant est rendu, vous donnant la possibilit\u00e9 d\u2019identifier facilement les mises \u00e0 jour des composants les plus fr\u00e9quemment afin que vous puissiez l\u2019optimiser de mani\u00e8re appropri\u00e9e.\n\n \n\n| vert – mise \u00e0 jour basse fr\u00e9quence <\/em>\n\n| bleu – mise \u00e0 jour moyenne de fr\u00e9quence <\/em>\n\nv rouge – d\u00e9note une mise \u00e0 jour tr\u00e8s fr\u00e9quente <\/em>\n\n \n
Identification des probl\u00e8mes perf avec React.addons.Perf<\/h2>\nPour d\u00e9marrer Perf, vous devez appeler Perf.start () depuis<\/em> la console, enregistrer l\u2019action et appeler Perf.stop()<\/em> pour arr\u00eater Perf. Ensuite, vous pouvez appeler l\u2019une des m\u00e9thodes suivantes pour afficher des ensembles de mesures utiles.\n
Perf.printWasted()<\/strong><\/pre>\nPerf.printWasted() est<\/em> la m\u00e9thode la plus utile que vous appelez sur React.addons.Perf. Perf.printWasted()vous indique la quantit\u00e9 de temps perdu \u00e0 contracter rendre l\u2019arbre et de comparer les DOM virtuels les uns avec les autres. Ces composants sont mentionn\u00e9s ci-dessus sont des candidats de choix pour am\u00e9liorer les performances de votre application React.\n\n \n
Perf.printInclusive() \/ Perf.printExclusive()<\/strong><\/pre>\nPerf.printInclusive () et<\/em> Perf.printExclusive () retournent le<\/em> temps qu\u2019il s\u2019est appropri\u00e9 pour rendre vos composants. La plupart des d\u00e9veloppeurs ne trouveront pas cette m\u00e9thode tr\u00e8s utile, car les probl\u00e8mes de performances d\u00e9clench\u00e9s par le rendu sont normalement r\u00e9solus en ne rendant pas en utilisant la m\u00e9thode ci-dessus: Perf.printWasted()<\/em>.\n\nToutefois, la m\u00e9thode peut vous aider \u00e0 identifier les composants qui effectuent des calculs lourds dans les m\u00e9thodes du cycle de vie. Vous apprendrez qu\u2019apr\u00e8s avoir corrig\u00e9 les probl\u00e8mes printWasted,<\/em> c\u2019est votre code d\u2019application non optimis\u00e9 qui accapare ces pr\u00e9cieuses ressources. Alternativement, vous pouvez apporter le profiler JavaScript de Chrome DevTool standard et jeter un oeil aux appels de fonction les plus lourds directement.\n\n \n
Perf.printDOM()<\/strong><\/pre>\nPerf.printDOM() affiche toutes<\/em> les op\u00e9rations DOM d\u00e9clench\u00e9es lors du rendu des arbres React. Si vous jouez avec ReactJS depuis un certain temps, alors vous savez que c\u2019est peut-\u00eatre la partie la plus lourde. Pour parcourir une liste infinie de lignes et de colonnes si votre application est assez complexe, peut prendre l\u2019\u00e9ternit\u00e9 pour d\u00e9tecter ce qui a exactement mal tourn\u00e9.\n\nUne fois que votre premier ensemble de composants est rendu, vous vous attendez \u00e0 ce que les futurs re-rendus r\u00e9utilisent les n\u0153uds DOM existants et ne cr\u00e9ent pas de n\u0153uds frais – une optimisation offerte par le DOM virtuel de React et prise en compte par chaque d\u00e9veloppeur React.\n\nPerf.printDOM() est pratique<\/em> pour trouver des bizarreries particuli\u00e8res et co\u00fbteuses du navigateur ou pour surveiller les modifications majeures et impr\u00e9visibles des DOM.\n\n \n
Surveillance synth\u00e9tique des applications Web ReactJS<\/h2>\nBien que les m\u00e9thodes mentionn\u00e9es ci-dessus font partie int\u00e9grante de la surveillance des performances d\u2019une application React, elles ne parviennent pas \u00e0 imiter les actions qu\u2019un utilisateur type effectue lors de l\u2019utilisation de l\u2019application. Une plate-forme de surveillance synth\u00e9tique, \ncombin\u00e9e \u00e0 un enregistreur de scripts,<\/a>\n<\/span>peut ex\u00e9cuter et rejouer des scripts pr\u00e9enregistr\u00e9s, simulant des transactions utilisateur et des actions utilisateur typiques dans un navigateur r\u00e9el. Par exemple, navigation de base, soumissions de formulaires, transactions de paniers d\u2019achat, jeux en ligne, vitesse de d\u00e9filement, animations, etc.\n\nBien que Perf soit un excellent outil pour surveiller le temps perdu dans le rendu de l\u2019arbre et la comparaison dom virtuel avec DOM r\u00e9el, il ne se traduit pas par ce que les utilisateurs peuvent \u00e9prouver lors de l\u2019utilisation de l\u2019application. Les solutions \nsynth\u00e9tiques de surveillance <\/a>\n<\/span>des applications Web, comme ceux offerts par \nDotcom-Monitor,<\/a>\n<\/span>consistent en un outil de script facile \u00e0 utiliser pour \u00e9crire vos diff\u00e9rents scripts de test de surveillance. Ces scripts peuvent s\u2019ex\u00e9cuter dans un environnement de test priv\u00e9 et v\u00e9rifient votre application Web pour diff\u00e9rents param\u00e8tres \u00e0 intervalles r\u00e9guliers. L\u2019utilisation d\u2019un outil de surveillance synth\u00e9tique qui utilise de vrais navigateurs vous permet d\u2019obtenir les r\u00e9sultats de performances les plus pr\u00e9cis.\n\nEn outre, la surveillance synth\u00e9tique peut \u00eatre ex\u00e9cut\u00e9e \u00e0 l\u2019aide de diff\u00e9rents appareils, navigateurs et emplacements g\u00e9ographiques. Avec les applications d\u2019une seule page, la vitesse initiale de chargement de la page n\u2019est pas aussi importante que l\u2019exp\u00e9rience de l\u2019utilisateur final. Non seulement il est essentiel de s\u2019assurer que vos applications sont en marche, mais les fonctionnalit\u00e9s doivent \u00e9galement \u00eatre surveill\u00e9es. Par exemple, les utilisateurs peuvent-ils effectuer les actions n\u00e9cessaires et quels sont, le cas \u00e9ch\u00e9ant, les services tiers ou les API qui causent des retards ou des probl\u00e8mes.\n\nL\u2019objectif de la surveillance des applications Web est d\u2019automatiser le processus d\u2019identification des probl\u00e8mes avant qu\u2019ils n\u2019affectent un plus grand nombre d\u2019utilisateurs. Avec la surveillance synth\u00e9tique, vous pouvez configurer des alertes en fonction des exigences de votre application React sp\u00e9cifique, et \u00eatre averti imm\u00e9diatement lorsque quelque chose ne va pas. Contrairement aux autres outils mentionn\u00e9s ci-dessus, la surveillance synth\u00e9tique adopte une approche proactive, vous lib\u00e9rant du processus fastidieux de vous et de votre \u00e9quipe devant ex\u00e9cuter des tests manuels.\n\n \n
Suivi des applications ReactJS : Conclusion<\/h2>\nBien que ces outils soient utiles pour surveiller vos applications React dans les environnements de d\u00e9veloppement, la surveillance des performances en production est un d\u00e9fi d\u2019une autre ampleur et a plus de poids. C\u00e9der \u00e0 la mentalit\u00e9 \u00abfonctionne sur ma machine\u00bb est une mise en garde lorsque la performance de votre application en production est en jeu. Les outils de surveillance synth\u00e9tique, d\u2019autre part, vous donnent des rapports de performance du point de vue de l\u2019utilisateur final, et non de certains cas de test clich\u00e9 imagin\u00e9s par les d\u00e9veloppeurs. N\u00e9anmoins, si vous cherchez \u00e0 niveler votre surveillance des performances ReactJS, obtenez un essai \ngratuit de 30 jours de Dotcom-Monitor aujourd\u2019hui<\/a>\n<\/span>.\n\n \t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
ReactJS combine la vitesse de JavaScript avec des capacit\u00e9s de rendu uniques pour cr\u00e9er des applications tr\u00e8s dynamiques, ax\u00e9es sur les performances et sensibles aux entr\u00e9es des utilisateurs. Le rapport 2018 de State of JS cite la performance comme la principale raison pour laquelle ReactJS a gagn\u00e9 autant de popularit\u00e9 en si peu de temps. […]<\/p>\n","protected":false},"author":21,"featured_media":13562,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-13560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/13560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=13560"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/13560\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/media\/13562"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=13560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=13560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=13560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}