Profilage des applications React avec l'API Profiler

Dans cet article, nous mesurerons les performances d'un exemple d'application React avec l'onglet Profiler dans React DevTools et le composant Profiler .

Vous venez de créer une toute nouvelle application React , mais vous souhaitez comprendre ses caractéristiques de performance avant de l'envoyer à vos clients. Bien que vous puissiez utiliser l'API User Timing du navigateur pour mesurer les temps de rendu de vos composants, il existe une meilleure alternative créée par l'équipe React: l'API Profiler et un Profiler onglet dans React DevTools .

L'API Profiler est la méthode recommandée pour mesurer les temps de rendu de nos composants, car elle est entièrement compatible avec des fonctionnalités telles que time-slicing et Suspense .

Dans cet article, nous mesurerons les performances de un exemple d'application React avec l'onglet Profiler dans React DevTools et le Composant Profiler .

Si nous travaillons sur notre application React en mode développement, nous pouvons utiliser l'onglet Profiler de React DevTools pour enregistrer des parties de son exécution, puis analyser tous les mises à jour effectuées par React. (Si nous voulons utiliser l'onglet Profiler sur une application de production, nous devons apporter quelques modifications à notre configuration .)

Pour profiler notre application, il suffit de changer dans l'onglet Profiler et appuyez sur le bouton Record pour démarrer le profilage:

Nous allons ensuite effectuer actions sur notre application et appuyez à nouveau sur le bouton Record pour arrêter le profilage. Les DevTools nous montreront chacune des mises à jour qui se sont produites pendant que nous enregistrions, en utilisant un diagramme de flamme sophistiqué:

Si vous n'êtes pas familier avec cette méthode de représentation des données de performance, vous vous demandez peut-être ce que signifient toutes ces barres colorées. Décomposons-le.

Chaque fois que l'un de nos composants effectue le rendu React compare l'arbre de composants résultant avec celui actuel. S'il y a des changements, React se chargera de les appliquer au DOM dans une phase appelée commit .

Les barres de couleur que nous voyons en haut sont des commits qui se sont produits pendant l'enregistrement. Les barres jaune / orange sont celles avec des temps de rendu plus élevés, donc nous devrions probablement y prêter une attention particulière:

Si nous cliquons sur l'un de ces commits, le tableau des flammes ci-dessous sera mis à jour, montrant les composants qui ont changé dans ce commit sous forme de barres horizontales. Plus la barre est longue, plus le rendu du composant prend du temps:

Le graphique montre le composant racine en haut, avec ses enfants assis en dessous dans ordre hiérarchique. Le nombre affiché à l'intérieur de chaque barre représente le temps nécessaire pour rendre le composant et ses enfants. Lorsque nous voyons quelque chose comme RangeButtons (0,2 ms sur 1,8 ms) cela signifie que RangeButtons a pris 0,2 ms pour être rendu, tandis que RangeButtons plus son fils unique ] ButtonGroup a pris 1,8 ms. Cela signifie que ButtonGroup doit avoir pris environ 1,6 ms pour le rendu, ce qui est confirmé lorsque nous regardons la barre ci-dessous qui indique ButtonGroup (0,3 ms sur 1,6 ms) . ce que nous pouvons faire ici est de cliquer sur la barre pour un certain composant. Non seulement le diagramme de flamme se concentrera sur le composant sélectionné, mais le volet de droite nous montrera également combien de fois il a été rendu pendant la durée de vie de l'application:

[19659004] L'onglet Profiler de React DevTools est un excellent moyen d'inspecter les performances de notre application sans avoir à modifier notre code. En enregistrant simplement les interactions clés, nous pourrons savoir où va le temps de rendu et identifier les goulots d'étranglement qui ralentissent notre application.

Utilisation du Profiler Component

Si nous voulons avoir du programmatique accès aux mesures de performances d'un composant spécifique, on peut utiliser le composant Profiler . Il encapsule une partie ou la totalité de notre arborescence d'applications et nous donne des métriques sur le temps qu'il a fallu à cet arbre pour s'afficher.

La première chose que nous devons faire pour utiliser le composant Profiler est de l'importer :

 import  React   { Profiler }   from   "react" ; 

The Profiler composant peut alors être utilisé pour envelopper n'importe quelle partie de notre arbre de composants:

 const   CustomStockChart   =  props  =>   {
   

   return   (
     ] < Profiler id  =  "StockChart"  onRender  =  { logTimes } > 
       < StockChart > 
         {} 
       < /  StockChart > 
     < /  Profiler > 
  )  ; 
} ; 

 const   logTimes   =   ( id [194590] 23] phase  actualTime  baseTime  startTime  commitTime )   => [19659026] {
  console .  log  ( ` $ { id }   's  $ { phase  }   phase: ` ) ; 
  console .  log  ( `Heure réelle:  $ { actualTime }  `  )  ; 
  console .  log  ( `Base time:  $ { baseTime }  `  )  ; 
  console .  log  ( `Heure de début:  $ { startTime }  `  )  ; 
  console .  log  ( `Commit time:  $ { commitTime }  `  )  ; 
} ; 

 export   default  CustomStockChart ; 

Lorsque CustomStockChart est rendu, le Profiler ] onRender callback sera invoqué avec un tas d'informations utiles. Dans notre exemple, il affichera quelque chose comme ceci sur la console:

 Phase de montage de StockChart:
Temps réel: 7.499999995867256
Heure de base: 7.1249999981955625
Heure de début: 384888.51500000054
Heure de validation: 384897,5449999998

Phase de mise à jour de StockChart:
Temps réel: 0,3500000038766302
Heure de base: 7.075000001175795
Heure de début: 385115.2050000001
Heure de validation: 385116.22499999974

La signification de chacun de ces arguments est expliquée dans la documentation de l'API Profiler . Dans le monde réel, au lieu de les enregistrer sur la console, vous les enverriez probablement à votre backend afin d'obtenir des graphiques agrégés utiles.

Quoi qu'il en soit, assurez-vous de passer du temps à comprendre ces deux nouveaux outils dans votre arsenal, car ils s'avéreront inestimables lorsque vous essayez d'identifier les problèmes de performances dans vos applications React!

Source link