react perf devtool
vtool
À la recherche de mainteneurs
Un devtool pour inspecter les performances des composants React
Introduction
Démo
Usages
Installer
Usage
Description
Phases
Mise en œuvre
Contributif
Licence
React Performance Devtool est une extension de navigateur pour inspecter les performances des composants React. Il examine statistiquement les performances des composants REACT en fonction des mesures qui sont collectées par React à l'aide de l'API window.performance .
Parallèlement à l'extension du navigateur, les mesures peuvent également être inspectées dans une console. Voir la section d'utilisation pour plus de détails.
Ce projet a commencé dans le but de prolonger les travaux effectués par Will Chen sur une proposition de réaction de performance. Vous pouvez en savoir plus ici.
Une démo de l'extension utilisée pour examiner les performances des composants React sur mon site Web.
Les mesures de performance peuvent également être enregistrées à une console. À chaque rendu, les mesures sont mises à jour et enregistrées sur la console.
Retirez ou déshabillez les instances de composant qui ne sont pas utilisées.
Inspectez ce qui bloque ou prend plus de temps après le démarrage d'une opération.
Examinez le tableau et voyez pour quels composants, vous devez écrire Si vous devez vous rendre compte du crochet de cycle de vie.
Examinez quels composants prennent plus de temps à charger.
Pour utiliser ce Devtool, vous devrez installer un module NPM qui enregistrera un écouteur (en savoir plus à ce sujet dans la section d'utilisation) et l'extension du navigateur.
Installation de l'extension
Les extensions ci-dessous représentent la version stable actuelle.
Installation du module NPM
npm install react-perf-devtool
Une construction umd est également disponible via unpkg
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Cette extension et cette package dépend également de la réact. Veuillez vous assurer que vous avez également installés.
Remarque - Le module NPM est important et nécessaire pour utiliser le devtool. Assurez-vous donc de l'avoir installé avant d'utiliser l'extension du navigateur.
Cette section de la documentation explique l'utilisation de Devtool et de l'API pour enregistrer un observateur dans une application React.
react-perf-devtool repose sur l'API window.PerformanceObserver native.PerformanceObserver qui a été ajoutée dans Chrome V52 et Firefox V57 . Pour plus d'informations, consultez les documents officiels de Mozilla ici.
Pour utiliser cette extension Devtool, vous devrez enregistrer un observateur dans votre application qui observera une collection de données (mesures de performance) pendant une période.
Enregistrer
L'enregistrement d'un observateur est très simple et n'est qu'une seule fonction d'appel. Voyons comment!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Vous pouvez placer ce code dans votre fichier index.js (recommandé) ou tout autre fichier de votre application.
Remarque - Ceci ne doit être utilisé en mode développement que lorsque vous devez inspecter les performances des composants React. Assurez-vous de le retirer lors de la construction de la production.
L'enregistrement d'un observateur accroche un objet contenant des informations sur les événements et les mesures de performance des composants REACT à l'objet Window, qui peut ensuite être accessible à l'intérieur de la fenêtre inspectée à l'aide d'évalues ().
À chaque rendu, cet objet est mis à jour avec de nouveaux mesures et événements. L'extension s'occupe de nettoyer la mémoire et aussi le cache.
Vous pouvez également passer un objet option et un callback facultatif qui reçoit un argument contenant les mesures analysées et agrégées
En utilisant le rappel
Un rappel facultatif peut également être adopté à registerObserver qui reçoit des mesures analysées comme argument.
Vous pouvez utiliser ce rappel pour inspecter les mesures analysées et agrégées, ou vous pouvez l'intégrer à tout autre cas d'utilisation. Vous pouvez également tirer parti de ces mesures de performance à l'aide de Google Analytics en envoyant ces mesures au tableau de bord Analytics. Ce processus est documenté ici.
Exemple -
const { registerObserver } = require ( 'react-perf-devtool' )
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( { } , callback ) Après avoir enregistré l'observateur, démarrez votre serveur de développement local et allez sur http://localhost:3000/ .
Remarque - Cette extension fonctionne uniquement pour les versions React 16 ou supérieures à celle-ci.
Après avoir installé l'extension avec succès, vous verrez un onglet appelé React Performance dans Chrome Developer Tools.
Les mesures de performance peuvent également être enregistrées à la console. Cependant, le processus d'impression des mesures n'est pas direct. Vous devrez configurer un serveur qui écoutera les mesures. Pour cela, vous pouvez utiliser Micro by Zeit qui est un microservice HTTP.
npm install --save micro
Vous pouvez transmettre un objet d'option comme argument pour registerObserver pour activer la journalisation et la configuration d'un numéro de port.
Utilisation de l'objet Option
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Vous pouvez transmettre trois propriétés à l'objet option , shouldLog et port .
shouldLog - il faut une valeur booléenne . S'il est réglé sur true, les mesures seront enregistrées à la console.
port - numéro de port pour le serveur où les mesures seront enver
timeout - Une valeur de délai d'expiration pour reporter l'initialisation de l'extension.
Si votre application prend du temps à charger, il est préférable de reporter l'initialisation de l'extension en spécifiant la valeur de délai d'expiration via la propriété timeout . Cela garantit que l'extension ne se chargera qu'après que votre application a été correctement chargée dans le navigateur afin que les mesures mises à jour puissent être rendus. Cependant, vous pouvez ignorer cette propriété si votre demande est en petite taille.
Exemple
// index.js file in your React App
const React = require ( 'react' )
const ReactDOM = require ( 'react-dom' )
const { registerObserver } = require ( 'react-perf-devtool' )
const Component = require ( './Component' ) // Some React Component
const options = {
shouldLog : true ,
port : 8080 ,
timeout : 12000 // Load the extension after 12 sec.
}
function callback ( measures ) {
// do something with the measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback )
ReactDOM . render ( < Component /> , document . getElementById ( 'root' ) ) // server.js
const { json } = require ( 'micro' )
module . exports = async req => {
console . log ( await json ( req ) )
return 200
} // package.json
{
"main" : "server.js" ,
"scripts" : {
"start-micro" : "micro -p 8080"
}
}Schéma des mesures
Vous trouverez ci-dessous le schéma des mesures de performance qui sont enregistrées à la console.
{
componentName ,
mount : { // Mount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
render : { // Render time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
update : { // Update time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
unmount : { // Unmount time
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
totalTimeSpent , // Total time taken by the component combining all the phases
percentTimeSpent , // Percent time
numberOfInstances , // Number of instances of the component
// Time taken in lifecycle hooks
componentWillMount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentDidMount: {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
componentWillReceiveProps : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
shouldComponentUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentDidUpdate : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
} ,
componentWillUnmount : {
averageTimeSpentMs ,
numberOfTimes ,
totalTimeSpentMs ,
}
}composants
Vous pouvez également inspecter les performances de composants spécifiques à l'aide d'options via la propriété components .
Exemple -
const options = {
shouldLog : true ,
port : 3000 ,
components : [ 'App' , 'Main' ] // Assuming you've these components in your project
}
function callback ( measures ) {
// do something with measures
}
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( options , callback ) La section de vue d'ensemble représente un aperçu du temps total (%) pris par tous les composants de votre application.
Le temps pris par tous les composants - montre le temps pris par tous les composants (combinant toutes les phases).
La durée pour commettre des changements - montre le temps passé à commettre des changements. En savoir plus à ce sujet ici
Durée pour commettre des effets de l'hôte - montre le temps consacré à commettre des effets d'hôte, c'est-à-dire s'engager lorsqu'un nouvel arbre est inséré (mise à jour) et non. des effets de l'hôte (comptage des effets dans la validation).
Durée pour appeler les méthodes de cycle de vie - rapporte la durée de l'appel des crochets de cycle de vie et le nombre total de méthodes appelées, lorsqu'un crochet de cycle de vie planifie une mise à jour en cascade.
Temps total
Effacer - Le bouton Effacer efface les mesures des tables et essuie également les résultats.
Recharger la fenêtre inspectée - Ce bouton recharge la fenêtre inspectée et affiche les nouvelles mesures.
Événements en attente - Cela indique les mesures en suspens (réagir les données de performance).
Cette section montre le temps pris par un composant dans une phase, le nombre d'instances d'un composant et un temps total combinant toutes les phases de MS et %
Vous trouverez ci-dessous les différentes phases pour lesquelles React mesure les performances:
Réacciation des arbres React - Dans cette phase, React rend le nœud racine et crée une fibre de travail en cours. S'il y a eu des mises à jour en cascade lors de la réconciliation, il en suspendre les mesures actives et les reprendra dans une boucle différée. Cela est causé lorsqu'une mise à jour de niveau supérieur interrompt le rendu précédent. Si une erreur a été lancée pendant la phase de rendu, elle capture l'erreur en trouvant la limite d'erreur la plus proche ou elle utilise la racine s'il n'y a pas de limite d'erreur.
Engagez des modifications - dans cette phase, les travaux terminés sont engagés. Il vérifie également si le nœud racine a un effet secondaire. S'il a un effet, ajoutez-le à la liste (lisez la plus la structure de données de la liste ici) ou commettez tous les effets secondaires de l'arborescence. S'il y a une mise à jour planifiée dans le commit actuel, cela donne un avertissement sur la mise à jour en cascade dans Lifecycle Hook . Au cours de la phase de validation, les mises à jour sont prévues dans le commit actuel. En outre, les mises à jour sont planifiées si la phase / étape n'est pas composantewillmount ou composantwillReceiveProps.
Commissez les effets de l'hôte - les effets de l'hôte sont engagés chaque fois qu'un nouvel arbre est inséré. Avec chaque nouvelle mise à jour prévue, les effets totaux de l'hôte sont calculés. Ce processus est effectué en deux phases, la première phase effectue toutes les insertions de nœuds hôtes, la suppression, la mise à jour et la référence se détruisent et l'autre phase effectue tous les rappels de cycle de vie et de référence.
Commissez le cycle de vie - Lorsque la première passe a été achevée lors de la création des effets de l'hôte, l'arbre de travail en cours est devenu l'arbre actuel. Le travail en cours est donc à jour dans ComponentDidMount / Update . Dans cette phase, tous les cycles de vie et les rappels de référence sont commis. Les cycles de vie se produisent en tant que laissez-passer séparés afin que tous les placements, les mises à jour et les suppressions dans tout l'arbre aient déjà été invoqués .
Dans la version précédente de ce Devtool, les métriques de performance étaient interrogées au lieu d'écouter un type d'événement. Cela nécessite de commenter la ligne à l'intérieur du package react-dom ( react-dom.development.js ) afin que ces mesures puissent être capturées par cet outil.
Mais maintenant, avec l'aide de l'API d'observateur de performance, un observateur peut être enregistré pour écouter un événement d'un type particulier et obtenir les entrées (mesures de performance). react-perf-devtool fournit une API au-dessus de l'observateur de performance, une fonction qui enregistre un observateur.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )Cet observateur écoute l'événement de mesure des performances React. Il accroche un objet contenant des informations sur les événements et les mesures de performance des composants React à l'objet de fenêtre qui peuvent ensuite être accessibles à l'intérieur de la fenêtre inspectée à l'aide d'EVAL ().
À chaque rendu, cet objet est mis à jour avec de nouveaux mesures et événements. L'extension s'occupe de nettoyer la mémoire et aussi le cache.
Un objet option et un callback facultatif peuvent également être transmis à registerObserver . L'objet option est utile lorsque les mesures de performance doivent être enregistrées sur une console. Le callback reçoit des résultats analysés et agrégés (métriques) comme son argument qui peut ensuite être utilisé pour les analyses.
Le calcul et l'agrégation des résultats se produisent dans le cadre de l'application et non dans le Devtool. Il a ses propres avantages.
Lisez le guide contributif
Mit
