ReactJS kombiniert die Geschwindigkeit von JavaScript mit einzigartigen Rendering-Funktionen, um Anwendungen zu erstellen, die hochdynamisch, leistungsorientiert und reaktionsschnell auf Benutzereingaben sind.
Der State of JS-Bericht 2018
nennt die Leistung als Hauptgrund dafür, dass ReactJS in so kurzer Zeit so viel Popularität erlangt hat. Wenn es um Optionen zum Erstellen von Single-Page-Anwendungen (SPAs) geht, bietet React Leistungsvorteile gegenüber Angular und anderen JavaScript-Frameworks und -Bibliotheken. Da React ein virtuelles DOM in JavaScript verwaltet, kann es schnell die minimalen Änderungen bestimmen, die erforderlich sind, um das Dokument in den gewünschten Zustand zu bringen. Da der Status einer React-Komponente in JavaScript gespeichert wird, können Sie den Zugriff auf das DOM umgehen.
Für kleine Anwendungen sind Performance-Optimierungen, die ReactJS out-of-the-box liefert, mehr als ausreichend. Wenn sich Ihre Anwendungen jedoch weiterentwickeln und komplexere Ansichten enthalten, kann die Wartung und Parallelisierung virtueller DOMs zu einer kostspieligen Angelegenheit werden. Eine große Anwendung ist ein riesiger, verzweigter und komplizierter Renderbaum. Jedes Mal, wenn Sie die Requisiten auf einen Knoten aktualisieren, muss React den Renderbaum vom Knoten bis hin zu den Zweigen und schließlich dem Blatt, auf dem virtuelle DOM-Vergleiche stattfinden, neu konfigurieren.
Nichtsdestotrotz neigt eine Anwendung dazu, mit zunehmender Benutzerbasis an Komplexität zuzunehmen, mehr Abhängigkeiten zu haben und mehr Plugins von Drittanbietern zu integrieren. Die Wahrscheinlichkeit, dass es zu Leistungsengpässen kommt, nimmt nur zu. Multiplizieren Sie dies mit einer ständig wachsenden Anzahl von Anwendungen auf Millionen internetfähiger Geräte unterschiedlicher Größe und Typen, und Sie können einem potenziellen Performance-Albtraum auf der ganzen Linie nicht ausweichen.
Beispielsweise erwarten Benutzer 60 Bilder pro Sekunde, wenn sie mit einer Webanwendung im Browser interagieren, sodass Sie nur 16,7 ms für das Rendern jedes Frames haben. Wenn Ihre App langsam ist, dauert es oft zu lange, auf Benutzerereignisse zu reagieren, die Daten zu verarbeiten oder die neuen Daten erneut zu rendern. In den meisten Fällen führen Sie keine komplexe Datenverarbeitung auf der Uhr durch – Sie verschwenden Zeit mit dem erneuten Rendern.
Zweifellos erfordert selbst die am besten gestaltete und optimierte React-App ein Tool zur Leistungsüberwachung.
Überwachen von Komponentenbereitstellungen mit Profiler
Die Häufigkeit, mit der Komponenten erneut gerendert werden, zusammen mit der Menge an Ressourcen und der Zeit, die benötigt werden, kann viel über die Leistung Ihrer React-Anwendung in der Produktion aussagen. Die Profiler-Komponente ist eine integrierte React-Komponente, die die “Mount”- oder “Update”-Zeit eines Komponententeilbaums misst. Wenn eine Komponente aktualisiert oder bereitgestellt wird, wird die onRender-Funktion von Profiler mit einem Zeitstempel versehen. Profiler bietet eine zugängliche Möglichkeit, Probleme in React-Apps anzuzeigen.
import { unstable_Profiler as Profiler } from "react"
<Profiler id="Counter" onRender={callback}>
<Counter />
</Profiler>
Die id-Requisite identifiziert die Berichterstellung, während die onRender-Funktion mit Argumenten verknüpft ist, wenn die Counter-Komponente gemountet oder überarbeitet wird.
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {
log("id: " + id, "phase:" + phase, "actualTime:" + actualTime, "baseTime: " + baseTime, "startTime: " + startTime, "commitTime: " + commitTime)
}
Die Argumente der Funktion sind gesammelte Zeitstempel, wann die Counter-Komponente gerendert wurde. Wir werden uns jeden der Parameter ansehen.
id. Die eindeutige ID, die der Profiler-Komponente zugeordnet ist.
Phase. Dadurch wird die Phase erkannt, ob sie sich in der “Mount”-Phase oder in der “Update”-Phase befindet.
actualTime. Die Zeit, die Profiler benötigt, um festgeschriebene Updates zu rendern.
baseTime. Die Zeit, die eine der Komponenten in der Profiler-Struktur zum Bereitstellen oder Aktualisieren benötigt.
startTime. Protokolliert den Zeitstempel Profiler beginnt mit der Messung der Bereitstellungs-/Renderzeit für seine untergeordneten Elemente.
commitTime. Die Zeit, die React benötigt hat, um ein Update zu committen.
Überwachen von Komponenten, die mit React Developer Tools neu gerendert werden
Wenn Sie während der Entwicklung erfahren, welche Komponente erneut gerendert wird, kann dies Ihre Anwendung in der Produktion vor verschiedenen Leistungsengpässen bewahren. Die React-Entwicklertools machen dies für Entwickler einfach, indem sie die Komponentengrenzen einfärben, wenn sie neu gerendert werden. Wenn die Hauptkomponenten erneut gerendert werden, werden die Kanten, die die Komponenten “Zähler” und “Anzahl” erfassen, kurz hervorgehoben.
Die Art der Farbe, die angezeigt wird, hängt davon ab, wie oft/häufig eine Komponente erneut gerendert wird, sodass Sie leicht erkennen können, welche Komponente am häufigsten aktualisiert wird, damit Sie sie entsprechend optimieren können.
| grün – Aktualisierung mit niedriger Frequenz
| blau – Aktualisierung der durchschnittlichen Frequenz
v rot – kennzeichnet eine sehr häufige Aktualisierung
Identifizieren von Leistungsproblemen mit React.addons.Perf
Um Perf zu starten, müssen Sie Perf.start() von der Konsole aus aufrufen, die Aktion aufzeichnen und Perf.stop() aufrufen, um Perf zu stoppen. Anschließend können Sie eine der folgenden Methoden aufrufen, um Sätze nützlicher Messungen anzuzeigen.
Perf.printWasted()
Perf.printWasted() ist die nützlichste Methode, die Sie für React.addons.Perf aufrufen. Perf.printWasted()gibt Ihnen an, wie viel Zeit Sie beim Contracting-Renderbaum und beim Vergleich virtueller DOMs untereinander verloren haben. Diese oben erwähnten Komponenten sind erstklassige Kandidaten, um die Leistung Ihrer React-Anwendung zu verbessern.
Perf.printInclusive() / Perf.printExclusive()
Perf.printInclusive () und Perf.printExclusive() geben die Zeit zurück, die für das Rendern der Komponenten benötigt wurde. Die meisten Entwickler werden diese Methode nicht sehr nützlich finden, da die durch das Rendern ausgelösten Leistungsprobleme normalerweise dadurch gelöst werden, dass nicht mit der obigen Methode gerendert wird: Perf.printWasted() .
Die Methode kann Ihnen jedoch dabei helfen, Komponenten zu identifizieren, die umfangreiche Berechnungen in Lebenszyklusmethoden durchführen. Sie werden feststellen, dass nach der Behebung von printWasted-Problemen Ihr nicht optimierter Anwendungscode diese wertvollen Ressourcen in Beschlag nimmt. Alternativ können Sie den Standard-JavaScript-Profiler von Chrome DevTool mitbringen und sich die umfangreichsten Funktionsaufrufe direkt ansehen.
Perf.printDOM()
Perf.printDOM() zeigt alle DOM-Operationen, die während des Renderns von React-Bäumen ausgelöst werden. Wenn Sie schon seit geraumer Zeit mit ReactJS spielen, wissen Sie, dass dies vielleicht der umständlichste Teil ist. Das Durchsuchen einer endlosen Liste von Zeilen und Spalten, wenn Ihre App ziemlich komplex ist, kann ewig dauern, um zu erkennen, was genau schief gelaufen ist.
Sobald Ihr erster Satz von Komponenten gerendert ist, erwarten Sie, dass zukünftige Re-Renderings vorhandene DOM-Knoten wiederverwenden und keine neuen Knoten erstellen würden – eine Optimierung, die durch das virtuelle DOM von React ermöglicht wird und von jedem React-Entwickler als selbstverständlich angesehen wird.
Perf.printDOM() ist praktisch, um eigenartige, teure Browser-Kuriositäten zu finden oder große, unvorhersehbare DOM-Änderungen zu überwachen.
Synthetisches Monitoring für ReactJS-Webanwendungen
Während die oben genannten Methoden integraler Bestandteil der Überwachung der Leistung einer React-Anwendung sind, können sie die Aktionen, die ein typischer Benutzer während der Verwendung der Anwendung ausführt, nicht nachahmen. Eine synthetische Überwachungsplattform in
Kombination mit einem Skriptrekorder
kann vorab aufgezeichnete Skripte ausführen und wiedergeben, um Benutzertransaktionen und typische Benutzeraktionen in einem echten Browser zu simulieren. Zum Beispiel grundlegende Navigation, Formularübermittlungen, Warenkorbtransaktionen, Online-Spiele, Scrollgeschwindigkeit, Animationen usw.
Perf ist zwar ein hervorragendes Tool, um die beim Rendern des Baums verlorene Zeit zu überwachen und das virtuelle DOM mit dem tatsächlichen DOM zu vergleichen, aber es lässt sich nicht auf das übertragen, was Benutzer bei der Verwendung der Anwendung erleben können. Synthetische
Lösungen zur Überwachung von Webanwendungen
, wie sie von
Dotcom-Monitor
angeboten werden, bestehen aus einem einfach zu bedienenden Skripting-Tool, mit dem Sie Ihre verschiedenen Überwachungstestskripte schreiben können. Diese Skripte können in einer privaten Testumgebung ausgeführt werden und überprüfen Ihre Webanwendung in regelmäßigen Abständen auf verschiedene Parameter. Die Verwendung eines synthetischen Überwachungstools, das echte Browser verwendet, ermöglicht es Ihnen, die genauesten Leistungsergebnisse zu erzielen.
Darüber hinaus kann die synthetische Überwachung mit verschiedenen Geräten, Browsern und geografischen Standorten durchgeführt werden. Bei Single-Page-Anwendungen ist die anfängliche Seitenladegeschwindigkeit nicht so wichtig wie die Benutzererfahrung. Es ist nicht nur wichtig, sicherzustellen, dass Ihre Anwendungen betriebsbereit sind, sondern auch die Funktionalität muss überwacht werden. Können Benutzer beispielsweise die erforderlichen Aktionen ausführen und welche Dienste oder APIs von Drittanbietern Verzögerungen oder Probleme verursachen, wenn überhaupt.
Das Ziel der Überwachung von Webanwendungen besteht darin, den Prozess zur Identifizierung von Problemen zu automatisieren, bevor sie eine größere Anzahl von Benutzern betreffen. Mit der synthetischen Überwachung können Sie Warnungen basierend auf den Anforderungen für Ihre spezifische React-Anwendung einrichten und sofort benachrichtigt werden, wenn etwas schief geht. Im Gegensatz zu den anderen oben beschriebenen Tools verfolgt die synthetische Überwachung einen proaktiven Ansatz, der Sie von dem zeitaufwändigen Prozess befreit, bei dem Sie und Ihr Team manuelle Tests durchführen müssen.
Überwachung von ReactJS-Anwendungen: Fazit
Während diese Tools für die Überwachung Ihrer React-Anwendungen in Entwicklungsumgebungen nützlich sind, ist die Überwachung der Leistung in der Produktion eine Herausforderung anderer Größenordnung und hat mehr Gewicht. Sich der “Arbeit an meiner Maschine”-Mentalität hinzugeben, ist ein warnendes Beispiel, wenn die Leistung Ihrer Anwendung in der Produktion auf dem Spiel steht. Synthetische Überwachungstools hingegen liefern Ihnen Leistungsberichte aus der Perspektive eines Endbenutzers und nicht aus irgendwelchen Klischee-Testfällen, die sich Entwickler ausdenken. Wenn Sie jedoch Ihre ReactJS-Leistungsüberwachung verbessern möchten, holen Sie sich
noch heute eine kostenlose 30-Tage-Testversion von Dotcom-Monitor
.
