Performance Profiler votre application React

React est un cadre génial pour le développement frontal. Il est important de savoir comment détecter les problèmes de performances dans une application React pour créer des applications React performantes. Dans cet article, nous allons apprendre à profiler les performances des applications React à l'aide de React Profiler et à en tirer parti pour détecter les problèmes de performances.

React est un formidable framework pour le développement front-end. Cela nous aide à créer des interfaces utilisateur interactives sans douleur. En utilisant le DOM virtuel, React est capable de réconcilier les modifications apportées au DOM de manière performante.

Mais lorsque nous écrivons du code, nous introduisons à notre insu des problèmes de performances. Ainsi, nous devrions pouvoir découvrir ces problèmes de performances avant de pouvoir les résoudre.

Dans cet article, nous allons apprendre à décrire les performances de notre application React à l'aide de React Profiler.

Sur le Web, parmi les Par ailleurs, une application est dite performante si elle gère un rendu supérieur à 60 images par seconde. N'importe quoi de moins que cela conduirait à un «jank» et à une expérience utilisateur généralement lente.

Conditions préalables

Pour suivre cet article, des connaissances de base de React sont requises. Vous devez également vous familiariser avec React DevTools.

React Profiler

React 16.5 prend désormais en charge le plug-in de profileur DevTools. Ce plugin collecte des informations temporelles sur chaque composant rendu afin d'identifier les goulots d'étranglement des performances.

React applique les modifications apportées au DOM pendant sa phase de commit . React Profiler regroupe les performances par commits, ce qui vous permet de voir le coût de chaque modification.

Accès à React Profiler

Si vous exécutez une application React qui prend en charge React Profiler, ouvrez simplement l'outil de développement React et restez ouvert. voir un onglet “Profiler”. Cliquez sur l'onglet pour afficher un bouton d'enregistrement qui enregistre les performances de votre application lorsque vous cliquez dessus:

Profilage d'une application React

Pour montrer comment profiler une application React à l'aide de React Profiler, I Vous utiliserez une application simple à faire créée à l'aide de l'application Créer une application React.

L'application comporte un champ de saisie et affiche une liste codée des tâches à effectuer. La saisie du champ de saisie est affichée dans une autre section de la page:

Pour enregistrer les performances de votre application, cliquez sur le bouton d’enregistrement, puis utilisez-la comme vous le feriez normalement. Une fois que vous avez commencé à enregistrer, React Profiler collecte des informations à chaque rendu de votre application. Une fois le profilage terminé, cliquez sur le bouton d'arrêt:

Lecture des données de performance

Lorsque vous cliquez sur le bouton d'arrêt, l'onglet Profiler est rempli de données de performance sous forme de un graphique de flamme. Les données comportent un tableau commit un sélecteur de vue cartographique et une section du graphique performance :

Graphique de validation

] Le tableau de validation se trouve dans la partie supérieure droite de l'onglet. Il contient tous les commits appliqués dans la période de profilage.

Chaque barre du graphique représente un seul commit. La hauteur et la couleur des barres représentent le temps qu’il a fallu à un commit pour se rendre; les barres hautes et jaunes sont les commits qui ont pris plus de temps, tandis que les barres courtes et bleues représentent les commits dont le rendu a été plus court.

Les barres peuvent être sélectionnées (les barres sélectionnées sont colorées en noir) et les informations de validation correspondantes visualisées. :

Dans l'image ci-dessus, nous voyons qu'il y a 81 commits. Le commit actuellement sélectionné a nécessité un rendu de 4,5 ms et il n'y a pas eu d'interaction. Dans les cas où vous avez autant de commits, vous pouvez filtrer les commits en cliquant sur l'icône représentant un engrenage dans l'image ci-dessus. Il vous permet de masquer les commits qui tombent sous des seuils spécifiés.

Consultation des commits

Les commits peuvent être visualisés sous forme de graphiques de flammes, de graphiques hiérarchisés, de graphiques de composants et d'interactions. Ces différentes vues vous offrent différentes perspectives pour visualiser les performances de votre application. Cliquez sur une barre de validation pour afficher les données correspondant à cette validation dans la vue graphique.

Graphique de flammes

La vue graphique de flammes représente l'état de votre application pour une validation particulière. Chaque barre représente un composant et la largeur d'une barre indique le temps de rendu d'un composant et de ses enfants.

Les couleurs des barres indiquent également le temps de rendu de chaque composant. Les composants jaunes ont pris plus de temps, les composants bleus ont pris moins de temps et les composants gris n'ont pas été rendus pendant la validation.

Un clic sur un composant vous permet d'afficher des informations à ce sujet lors de cette validation dans le panneau de droite:

Diagramme classé

La vue Diagramme classé affiche chaque composant dans un seul commit, classé par ordre de temps de rendu. Les composants dont le rendu a été plus long sont au sommet. Pour afficher ce graphique, cliquez sur le bouton radio de graphique classé dans le coin supérieur gauche de l'onglet Profileur. Comme avec le tableau des flammes, vous pouvez zoomer sur un tableau classé en cliquant sur les composants suivants:

Tableau des composants

Le tableau des composants fournit des informations sur le cycle de rendu d'un composant, vous profiliez. Il affiche cela sous la forme d'un graphique à barres. Chaque barre représente une heure à laquelle le composant a été rendu. Si le composant sélectionné n'a pas été rendu pendant la session de profilage, un message l'indique.

Pour afficher ce graphique, double-cliquez sur un composant ou sélectionnez-en un, puis cliquez sur l'icône du graphique à barres bleu dans le volet de détail de droite. Vous pouvez revenir au graphique précédent en cliquant sur le bouton « x » dans le volet de détail de droite:

Graphique d'interaction

Le graphique d'interaction est un API expérimentale capable de suivre la cause de d'une mise à jour et de l'afficher dans l'onglet Profil.

Problèmes courants liés à React Profiler

• La présence de plusieurs racines dans votre application peut entraîner une erreur après profilage: Aucune donnée de profilage n'a été enregistrée pour la racine sélectionnée. Si vous rencontrez cette erreur, essayez de sélectionner une autre racine dans le panneau elements pour afficher les informations de profilage de cette racine.
• Parfois, une validation est si rapide que React Profiler ne reçoit aucune information significative. Dans ce cas, vous obtenez le message d'erreur suivant: Aucune donnée de synchronisation à afficher pour le commit sélectionné.

Conclusion

Dans cet article, nous avons appris le profilage des performances pour une application React utilisant React Profiler. J'espère que vous avez appris quelque chose qui vous aidera à créer des applications React plus performantes.

Pour en savoir plus sur la création d'applications React

Vous souhaitez en savoir plus sur React et démarrer avec le développement de votre application React? Consultez ces ressources pour en savoir plus: