react perf devtool
vtool
Auf der Suche nach Betreuer
Ein Devtool zur Überprüfung der Leistung von React -Komponenten
Einführung
Demo
Verwendung
Installieren
Verwendung
Beschreibung
Phasen
Durchführung
Beitragen
Lizenz
React Performance Devtool ist eine Browserverlängerung zur Überprüfung der Leistung von React -Komponenten. Es untersucht statistisch die Leistung von React -Komponenten basierend auf den Maßnahmen, die durch React unter Verwendung von window.performance -API gesammelt werden.
Zusammen mit der Browsererweiterung können auch die Maßnahmen in einer Konsole inspiziert werden. Weitere Informationen finden Sie im Abschnitt Verwendungsabschnitt.
Dieses Projekt begann mit einem Zweck, die von Will Chen geleisteten Arbeiten für einen Vorschlag für die React -Leistungstabelle zu erweitern. Hier können Sie mehr darüber lesen.
Eine Demo der Erweiterung, die verwendet wird, um die Leistung von React -Komponenten auf meiner Website zu untersuchen.
Leistungsmaßnahmen können auch bei einer Konsole angemeldet werden. Bei jedem Neurender werden Maßnahmen aktualisiert und an der Konsole angemeldet.
Entfernen oder entfernen Sie die nicht verwendeten Komponenteninstanzen.
Überprüfen Sie, was nach Beginn eines Vorgangs blockiert oder mehr Zeit in Anspruch nehmen.
Untersuchen Sie die Tabelle und prüfen Sie, welche Komponenten Sie schreiben müssen, um den Lebenszyklushaken zu schreiben.
Untersuchen Sie, welche Komponenten mehr Zeit zum Laden in Anspruch nehmen.
Um diesen Devtool zu verwenden, müssen Sie ein NPM -Modul installieren, das einen Listener (mehr darüber im Abschnitt Verwendungsabschnitt) und die Browser -Erweiterung registriert.
Installation der Erweiterung
Die folgenden Erweiterungen repräsentieren die aktuelle stabile Version.
Installieren des NPM -Moduls
npm install react-perf-devtool
Ein umd -Build ist auch über UNPKG erhältlich
< script crossorigin src = "https://unpkg.com/[email protected]/lib/npm/hook.js" > </ script >Diese Erweiterung und dieses Paket hängt auch von React ab. Bitte stellen Sie sicher, dass Sie diese auch installiert haben.
Hinweis - Das NPM -Modul ist wichtig und erforderlich, um die Devtool zu verwenden. Stellen Sie also sicher, dass Sie es installiert haben, bevor Sie die Browser -Erweiterung verwenden.
In diesem Abschnitt der Dokumentation wird die Verwendung von Devtool und der API für die Registrierung eines Beobachters in einer React -App erläutert.
react-perf-devtool stützt sich auf das native window.PerformanceObserver . PerformanceObserver-API, die in Chrom V52 und Firefox V57 hinzugefügt wurde. Weitere Informationen finden Sie in den offiziellen Mozilla -Dokumenten hier.
Um diese Devtool -Erweiterung zu verwenden, müssen Sie einen Beobachter in Ihrer App registrieren, der eine Sammlung von Daten (Leistungsmessungen) im Laufe einer Zeit beobachtet.
Betrachter registrieren
Die Registrierung eines Beobachters ist sehr einfach und nur ein Funktionsaufruf entfernt. Mal sehen wie!
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( ) Sie können diesen Code in Ihrer index.js -Datei (empfohlen) oder einer anderen Datei in Ihrer App platzieren.
Hinweis - Dies sollte nur im Entwicklungsmodus verwendet werden, wenn Sie die Leistung von React -Komponenten untersuchen müssen. Stellen Sie sicher, dass Sie es beim Bau von Produktion entfernen.
Durch die Registrierung eines Observer hängt ein Objekt mit Informationen zu den Ereignissen und Leistungsmessungen von React -Komponenten an das Fensterobjekt, auf das dann im geprüften Fenster mit Eval () zugegriffen werden kann.
Bei jedem Neurender wird dieses Objekt mit neuen Maßnahmen und Ereignissen aktualisiert. Die Erweiterung kümmert sich um das Löschen des Speichers und auch den Cache.
Sie können auch ein option und einen optionalen callback übergeben, der ein Argument mit den analysierten und aggregierten Maßnahmen empfängt
Verwenden des Rückrufs
Ein optionaler Rückruf kann auch an registerObserver übergeben werden, der als Argument analysierte Maßnahmen erhält.
Sie können diesen Rückruf verwenden, um die analysierten und aggregierten Maßnahmen zu inspizieren, oder Sie können ihn in jeden anderen Anwendungsfall integrieren. Sie können diese Leistungsmaßnahmen auch mit Google Analytics nutzen, indem Sie diese Maßnahmen an das Analytics -Dashboard senden. Dieser Vorgang ist hier dokumentiert.
Beispiel -
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 ) Nachdem Sie den Beobachter registriert haben, starten Sie Ihren lokalen Entwicklungsserver und gehen Sie zu http://localhost:3000/ .
HINWEIS - Diese Erweiterung eignet sich nur für Reaktionen von 16 oder über Versionen davon.
Nachdem Sie die Erweiterung erfolgreich installiert haben, sehen Sie eine Registerkarte namens React Performance in Chrome Developer Tools.
Die Leistungsmaßnahmen können auch bei der Konsole angemeldet werden. Der Druckprozess der Maßnahmen ist jedoch nicht direkt. Sie müssen einen Server einrichten, der die Maßnahmen anhört. Dafür können Sie Micro von Zeit verwenden, einem HTTP -Microservice.
npm install --save micro
Sie können ein Optionsobjekt als Argument zum registerObserver übergeben, um die Protokollierung und das Einrichten einer Portnummer zu aktivieren.
Verwenden des Optionsobjekts
{
shouldLog : boolean , // default value: false
port : number // default value: 8080
timeout : number // default value: 2000
} Sie können drei Eigenschaften an das option übergeben, shouldLog und port .
shouldLog - es braucht einen booleschen Wert. Wenn sie auf True gesetzt sind, werden Maßnahmen an der Konsole protokolliert.
port - Portnummer für den Server, auf dem die Maßnahmen gesendet werden
timeout - Ein Zeitlimitwert, um die Initialisierung der Erweiterung aufzuschieben.
Wenn Ihre Bewerbung Zeit zum Laden benötigt, ist es besser, die Initialisierung der Erweiterung zu verschieben, indem der Zeitüberschreitungswert über timeout -Eigenschaft angegeben wird. Dies stellt sicher, dass die Erweiterung erst geladen wird, nachdem Ihre Anwendung im Browser ordnungsgemäß geladen wurde, damit die aktualisierten Maßnahmen erfüllt werden können. Sie können diese Eigenschaft jedoch überspringen, wenn sich Ihre Bewerbung in geringer Größe befindet.
Beispiel
// 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"
}
}Schema der Maßnahmen
Nachfolgend finden Sie das Schema der Leistungsmaßnahmen, die an der Konsole angemeldet sind.
{
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 ,
}
}Komponenten
Sie können auch die Leistung bestimmter Komponenten mithilfe von Optionen über die Eigenschaft components überprüfen.
Beispiel -
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 ) Der Abschnitt über den Überblick gibt einen Überblick über die Gesamtzeit (%), die von allen Komponenten in Ihrer Anwendung übernommen wurde.
Die Zeit aller Komponenten - zeigt die Zeit, die von allen Komponenten (kombiniert alle Phasen) benötigt wird.
Zeitdauer für Veränderungen - zeigt die Zeit, die für die Begehung von Änderungen aufgewendet wird. Lesen Sie hier mehr darüber
Zeitdauer für die Begehung von Host -Effekten - zeigt die Zeit, die für die Begehung von Host -Effekten aufgewendet wird, dh festgelegt, wenn ein neuer Baum eingefügt wird (Update) und Nr. von Wirtseffekten (Auswirkung zählen im Commit).
Zeitdauer zum Aufrufen von Lebenszyklusmethoden - Berichtet über die Zeitdauer des Aufrufens von Lebenszyklushaken und die Gesamtno der aufgelöten Methoden, wenn ein Lebenszyklushaken ein Kaskadierungs -Update plant.
Gesamtzeit
Löschen - Die Taste für Klare löscht die Maßnahmen aus den Tabellen und wischt auch die Ergebnisse ab.
Laden Sie das geprüfte Fenster neu - Diese Schaltfläche lädt das geprüfte Fenster neu und zeigt die neuen Maßnahmen an.
Ausstehende Ereignisse - Dies zeigt die anhängigen Maßnahmen (React -Leistungsdaten).
Dieser Abschnitt zeigt die Zeit, die eine Komponente in einer Phase, die Anzahl der Instanzen einer Komponente und die Gesamtzeit kombiniert, die alle Phasen in MS und % kombiniert
Nachfolgend sind die verschiedenen Phasen angegeben, für die React die Leistung misst:
React Tree -Versöhnung - In dieser Phase rendert React den Wurzelknoten und erzeugt eine faserbezogene Arbeit. Wenn es einige kaskadierende Updates während der Versöhnung gab, pausieren Sie alle aktiven Messungen und werden in einer aufgeschobenen Schleife wieder aufgenommen. Dies wird verursacht, wenn ein Update auf höchstem Niveau das vorherige Render unterbricht. Wenn während der Renderphase ein Fehler geworfen wurde, erfasst er den Fehler, indem die nächste Fehlergrenze gefunden wird, oder es verwendet das Stamm, wenn keine Fehlergrenze vorliegt.
Veränderungen begehen - In dieser Phase ist die abgeschlossene Arbeiten begangen. Außerdem überprüft es, ob der Stammknoten einen Nebeneffekt hat. Wenn es sich um einen Effekt handelt, fügen Sie ihn der Liste hinzu (lesen Sie hier mehr diese Listendatenstruktur) oder verpflichten Sie alle Nebenwirkungen im Baum. Wenn im aktuellen Commit ein geplanter Update vorhanden ist, wird vor dem Cascading -Update in Lifecycle Hook gewarnt. Während der Commit -Phase sind im aktuellen Commit Updates geplant. Außerdem sind Updates geplant, wenn die Phase/Stufe keine Komponenten- oder Komponenten- oder Komponentierprops ist.
Commit -Wirt -Effekte - Wirtseffekte werden festgelegt, wenn ein neuer Baum eingefügt wird. Bei jedem neuen Update, das geplant ist, werden die Gesamtwirteffekte berechnet. Dieser Vorgang erfolgt in zwei Phasen, in der ersten Phase werden alle Hostknoteninsertionen, Lösch-, Aktualisierungs- und Ref -Entmunte durchgeführt, und die andere Phase führt alle Lebenszyklus- und REF -Rückrufe durch.
Lebenszyklu Die laufenden Arbeiten sind also während des KomponentDidmount/Updates aktuell. In dieser Phase werden alle Lebenszyklen und REF -Rückrufe begangen. Lebenszykle zu begehen, werden als separate Pass so geschehen, dass alle Platzierungen, Aktualisierungen und Löschungen im gesamten Baum bereits aufgerufen wurden .
In der früheren Version dieser Devtool wurden Leistungsmetriken abfragt, anstatt auf einen Ereignisart zu hören. Dies erforderte, um die Zeile innerhalb des react-dom -Pakets ( react-dom.development.js ) zu kommentieren, damit diese Metriken von diesem Tool erfasst werden können.
Mit Hilfe der Performance Observer -API kann ein Beobachter jedoch registriert werden, um ein Ereignis eines bestimmten Typs anzuhören und die Einträge (Leistungsmaßnahmen) zu erhalten. react-perf-devtool bietet eine API über den Leistungsbeobachter, eine Funktion, die einen Beobachter registriert.
const { registerObserver } = require ( 'react-perf-devtool' )
// assign the observer to the global scope, as the GC will delete it otherwise
window . observer = registerObserver ( )Dieser Beobachter hört auf das Ereignis der React -Leistungsmessung zu. Es enthält ein Objekt, das Informationen zu den Ereignissen und Leistungsmessungen von React -Komponenten enthält, auf das dann im geprüften Fenster mit Eval () zugegriffen werden kann.
Bei jedem Neurender wird dieses Objekt mit neuen Maßnahmen und Ereignissen aktualisiert. Die Erweiterung kümmert sich um das Löschen des Speichers und auch den Cache.
Ein option und ein optionaler callback können auch an registerObserver übergeben werden. Das option ist nützlich, wenn Leistungsmaßnahmen bei einer Konsole angemeldet werden sollen. Der callback erhält analysierte und aggregierte Ergebnisse (Metriken) als Argument, das dann für Analysen verwendet werden kann.
Berechnung und Aggregation der Ergebnisse erfolgt im App -Frame und nicht im Devtool. Es hat seine eigenen Vorteile.
Lesen Sie den beitragenden Leitfaden
MIT
