{"id":9706,"date":"2020-05-25T07:23:48","date_gmt":"2020-05-25T07:23:48","guid":{"rendered":"https:\/\/www.dotcom-monitor.com\/blog\/2020\/05\/25\/herausforderungen-monitoring-reactjs-anwendungen\/"},"modified":"2026-06-15T02:46:11","modified_gmt":"2026-06-15T02:46:11","slug":"herausforderungen-monitoring-reactjs-anwendungen","status":"publish","type":"post","link":"https:\/\/www.dotcom-monitor.com\/blog\/de\/herausforderungen-monitoring-reactjs-anwendungen\/","title":{"rendered":"Herausforderungen bei der \u00dcberwachung von ReactJS-Anwendungen"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

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<\/a> <\/span>nennt die Leistung als Hauptgrund daf\u00fcr, dass ReactJS in so kurzer Zeit so viel Popularit\u00e4t erlangt hat. Wenn es um Optionen zum Erstellen von Single-Page-Anwendungen (SPAs) geht, bietet React Leistungsvorteile gegen\u00fcber Angular und anderen JavaScript-Frameworks und -Bibliotheken. Da React ein virtuelles DOM in JavaScript verwaltet, kann es schnell die minimalen \u00c4nderungen bestimmen, die erforderlich sind, um das Dokument in den gew\u00fcnschten Zustand zu bringen. Da der Status einer React-Komponente in JavaScript gespeichert wird, k\u00f6nnen Sie den Zugriff auf das DOM umgehen.<\/p>

F\u00fcr 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\u00dfe 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\u00dflich dem Blatt, auf dem virtuelle DOM-Vergleiche stattfinden, neu konfigurieren.<\/p>

Nichtsdestotrotz neigt eine Anwendung dazu, mit zunehmender Benutzerbasis an Komplexit\u00e4t zuzunehmen, mehr Abh\u00e4ngigkeiten zu haben und mehr Plugins von Drittanbietern zu integrieren. Die Wahrscheinlichkeit, dass es zu Leistungsengp\u00e4ssen kommt, nimmt nur zu. Multiplizieren Sie dies mit einer st\u00e4ndig wachsenden Anzahl von Anwendungen auf Millionen internetf\u00e4higer Ger\u00e4te unterschiedlicher Gr\u00f6\u00dfe und Typen, und Sie k\u00f6nnen einem potenziellen Performance-Albtraum auf der ganzen Linie nicht ausweichen.<\/p>

Beispielsweise erwarten Benutzer 60 Bilder pro Sekunde, wenn sie mit einer Webanwendung im Browser interagieren, sodass Sie nur 16,7 ms f\u00fcr 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\u00e4llen f\u00fchren Sie keine komplexe Datenverarbeitung auf der Uhr durch \u2013 Sie verschwenden Zeit mit dem erneuten Rendern.<\/p>

Zweifellos erfordert selbst die am besten gestaltete und optimierte React-App ein Tool zur Leistungs\u00fcberwachung.<\/p>

\u00a0<\/p>

\u00dcberwachen von Komponentenbereitstellungen mit Profiler<\/h3>

Die H\u00e4ufigkeit, mit der Komponenten erneut gerendert werden, zusammen mit der Menge an Ressourcen und der Zeit, die ben\u00f6tigt werden, kann viel \u00fcber 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<\/span> <\/span>die onRender-Funktion<\/em> von Profiler mit einem Zeitstempel versehen. Profiler bietet eine zug\u00e4ngliche M\u00f6glichkeit, Probleme in React-Apps anzuzeigen.<\/p>

\u00a0<\/p>

import { unstable_Profiler as Profiler } from \"react\"\n\n<Profiler id=\"Counter\" onRender={callback}>\n\n    <Counter \/>\n\n<\/Profiler><\/pre>
\u00a0<\/p>
Die id-Requisite<\/em> identifiziert die Berichterstellung, w\u00e4hrend die onRender-Funktion<\/em> mit Argumenten verkn\u00fcpft ist, wenn die Counter-Komponente<\/em> gemountet oder \u00fcberarbeitet wird.<\/p>
\u00a0<\/p>
function callback(id, phase, actualTime, baseTime, startTime, commitTime) {\n\nlog(\"id: \" + id, \"phase:\" + phase, \"actualTime:\" + actualTime,   \"baseTime: \" + baseTime, \"startTime: \" + startTime, \"commitTime: \" +  commitTime)\n\n}<\/pre>
\u00a0<\/p>
Die Argumente der Funktion sind gesammelte Zeitstempel, wann die Counter-Komponente<\/em> gerendert wurde. Wir werden uns jeden der Parameter ansehen.<\/p>
\u00a0<\/p>
id<\/strong>. Die eindeutige ID, die der Profiler-Komponente zugeordnet ist.<\/p>
Phase<\/strong>. Dadurch wird die Phase erkannt, ob sie sich in der “Mount”-Phase oder in der “Update”-Phase befindet.<\/p>
actualTime<\/strong>. Die Zeit, die Profiler ben\u00f6tigt, um festgeschriebene Updates zu rendern.<\/p>
baseTime<\/strong>. Die Zeit, die eine der Komponenten in der Profiler-Struktur zum Bereitstellen oder Aktualisieren ben\u00f6tigt.<\/p>
startTime<\/strong>. Protokolliert den Zeitstempel Profiler beginnt mit der Messung der Bereitstellungs-\/Renderzeit f\u00fcr seine untergeordneten Elemente.<\/p>
commitTime<\/strong>. Die Zeit, die React ben\u00f6tigt hat, um ein Update zu committen.<\/p>
\u00a0<\/p>
\u00dcberwachen von Komponenten, die mit React Developer Tools neu gerendert werden<\/h3>
Wenn Sie w\u00e4hrend der Entwicklung erfahren, welche Komponente erneut gerendert wird, kann dies Ihre Anwendung in der Produktion vor verschiedenen Leistungsengp\u00e4ssen bewahren. Die React-Entwicklertools machen dies f\u00fcr Entwickler einfach, indem sie die Komponentengrenzen einf\u00e4rben, wenn sie neu gerendert werden. Wenn die Hauptkomponenten erneut gerendert werden, werden die Kanten, die die Komponenten “Z\u00e4hler” und “<\/em>Anzahl<\/em>” erfassen, kurz hervorgehoben.<\/p>
Die Art der Farbe, die angezeigt wird, h\u00e4ngt davon ab, wie oft\/h\u00e4ufig eine Komponente erneut gerendert wird, sodass Sie leicht erkennen k\u00f6nnen, welche Komponente am h\u00e4ufigsten aktualisiert wird, damit Sie sie entsprechend optimieren k\u00f6nnen.<\/p>
\u00a0<\/p>
| gr\u00fcn – Aktualisierung mit niedriger Frequenz <\/em><\/p>
| blau – Aktualisierung der durchschnittlichen Frequenz <\/em><\/p>
v rot – kennzeichnet eine sehr h\u00e4ufige Aktualisierung <\/em><\/p>
\u00a0<\/p>
Identifizieren von Leistungsproblemen mit React.addons.Perf<\/h3>
Um Perf zu starten, m\u00fcssen Sie Perf.start() von der Konsole aus aufrufen, die Aktion aufzeichnen und Perf.stop()<\/em> aufrufen, um Perf<\/em> zu stoppen. Anschlie\u00dfend k\u00f6nnen Sie eine der folgenden Methoden aufrufen, um S\u00e4tze n\u00fctzlicher Messungen anzuzeigen.<\/p>
Perf.printWasted()<\/strong><\/pre>
Perf.printWasted()<\/em> ist die n\u00fctzlichste Methode, die Sie f\u00fcr 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\u00e4hnten Komponenten sind erstklassige Kandidaten, um die Leistung Ihrer React-Anwendung zu verbessern.<\/p>
\u00a0<\/p>
Perf.printInclusive() \/ Perf.printExclusive()<\/strong><\/pre>
Perf.printInclusive<\/em> () und Perf.printExclusive()<\/em> geben die Zeit zur\u00fcck, die f\u00fcr das Rendern der Komponenten ben\u00f6tigt wurde. Die meisten Entwickler werden diese Methode nicht sehr n\u00fctzlich finden, da die durch das Rendern ausgel\u00f6sten Leistungsprobleme normalerweise dadurch gel\u00f6st werden, dass nicht mit der obigen Methode gerendert wird: Perf.printWasted() .<\/em><\/p>
Die Methode kann Ihnen jedoch dabei helfen, Komponenten zu identifizieren, die umfangreiche Berechnungen in Lebenszyklusmethoden durchf\u00fchren. Sie werden feststellen, dass nach der Behebung von printWasted-Problemen<\/em> Ihr nicht optimierter Anwendungscode diese wertvollen Ressourcen in Beschlag nimmt. Alternativ k\u00f6nnen Sie den Standard-JavaScript-Profiler von Chrome DevTool mitbringen und sich die umfangreichsten Funktionsaufrufe direkt ansehen.<\/p>
\u00a0<\/p>
Perf.printDOM()<\/strong><\/pre>
Perf.printDOM()<\/em> zeigt alle DOM-Operationen, die w\u00e4hrend des Renderns von React-B\u00e4umen ausgel\u00f6st werden. Wenn Sie schon seit geraumer Zeit mit ReactJS spielen, wissen Sie, dass dies vielleicht der umst\u00e4ndlichste 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.<\/p>
Sobald Ihr erster Satz von Komponenten gerendert ist, erwarten Sie, dass zuk\u00fcnftige Re-Renderings vorhandene DOM-Knoten wiederverwenden und keine neuen Knoten erstellen w\u00fcrden – eine Optimierung, die durch das virtuelle DOM von React erm\u00f6glicht wird und von jedem React-Entwickler als selbstverst\u00e4ndlich angesehen wird.<\/p>
Perf.printDOM()<\/em> ist praktisch, um eigenartige, teure Browser-Kuriosit\u00e4ten zu finden oder gro\u00dfe, unvorhersehbare DOM-\u00c4nderungen zu \u00fcberwachen.<\/p>
\u00a0<\/p>
Synthetisches Monitoring f\u00fcr ReactJS-Webanwendungen<\/h3>
W\u00e4hrend die oben genannten Methoden integraler Bestandteil der \u00dcberwachung der Leistung einer React-Anwendung sind, k\u00f6nnen sie die Aktionen, die ein typischer Benutzer w\u00e4hrend der Verwendung der Anwendung ausf\u00fchrt, nicht nachahmen. Eine synthetische \u00dcberwachungsplattform in Kombination mit einem Skriptrekorder<\/a> <\/span>kann vorab aufgezeichnete Skripte ausf\u00fchren und wiedergeben, um Benutzertransaktionen und typische Benutzeraktionen in einem echten Browser zu simulieren. Zum Beispiel grundlegende Navigation, Formular\u00fcbermittlungen, Warenkorbtransaktionen, Online-Spiele, Scrollgeschwindigkeit, Animationen usw.<\/p>
Perf ist zwar ein hervorragendes Tool, um die beim Rendern des Baums verlorene Zeit zu \u00fcberwachen und das virtuelle DOM mit dem tats\u00e4chlichen DOM zu vergleichen, aber es l\u00e4sst sich nicht auf das \u00fcbertragen, was Benutzer bei der Verwendung der Anwendung erleben k\u00f6nnen. Synthetische L\u00f6sungen zur \u00dcberwachung von Webanwendungen<\/a><\/span>, wie sie von Dotcom-Monitor<\/a> <\/span>angeboten werden, bestehen aus einem einfach zu bedienenden Skripting-Tool, mit dem Sie Ihre verschiedenen \u00dcberwachungstestskripte schreiben k\u00f6nnen. Diese Skripte k\u00f6nnen in einer privaten Testumgebung ausgef\u00fchrt werden und \u00fcberpr\u00fcfen Ihre Webanwendung in regelm\u00e4\u00dfigen Abst\u00e4nden auf verschiedene Parameter. Die Verwendung eines synthetischen \u00dcberwachungstools, das echte Browser verwendet, erm\u00f6glicht es Ihnen, die genauesten Leistungsergebnisse zu erzielen.<\/p>
Dar\u00fcber hinaus kann die synthetische \u00dcberwachung mit verschiedenen Ger\u00e4ten, Browsern und geografischen Standorten durchgef\u00fchrt werden. Bei Single-Page-Anwendungen ist die anf\u00e4ngliche Seitenladegeschwindigkeit nicht so wichtig wie die Benutzererfahrung. Es ist nicht nur wichtig, sicherzustellen, dass Ihre Anwendungen betriebsbereit sind, sondern auch die Funktionalit\u00e4t muss \u00fcberwacht werden. K\u00f6nnen Benutzer beispielsweise die erforderlichen Aktionen ausf\u00fchren und welche Dienste oder APIs von Drittanbietern Verz\u00f6gerungen oder Probleme verursachen, wenn \u00fcberhaupt.<\/p>
Das Ziel der \u00dcberwachung von Webanwendungen besteht darin, den Prozess zur Identifizierung von Problemen zu automatisieren, bevor sie eine gr\u00f6\u00dfere Anzahl von Benutzern betreffen. Mit der synthetischen \u00dcberwachung k\u00f6nnen Sie Warnungen basierend auf den Anforderungen f\u00fcr Ihre spezifische React-Anwendung einrichten und sofort benachrichtigt werden, wenn etwas schief geht. Im Gegensatz zu den anderen oben beschriebenen Tools verfolgt die synthetische \u00dcberwachung einen proaktiven Ansatz, der Sie von dem zeitaufw\u00e4ndigen Prozess befreit, bei dem Sie und Ihr Team manuelle Tests durchf\u00fchren m\u00fcssen.<\/p>
\u00a0<\/p>
\u00dcberwachung von ReactJS-Anwendungen: Fazit<\/h3>
W\u00e4hrend diese Tools f\u00fcr die \u00dcberwachung Ihrer React-Anwendungen in Entwicklungsumgebungen n\u00fctzlich sind, ist die \u00dcberwachung der Leistung in der Produktion eine Herausforderung anderer Gr\u00f6\u00dfenordnung und hat mehr Gewicht. Sich der “Arbeit an meiner Maschine”-Mentalit\u00e4t hinzugeben, ist ein warnendes Beispiel, wenn die Leistung Ihrer Anwendung in der Produktion auf dem Spiel steht. Synthetische \u00dcberwachungstools hingegen liefern Ihnen Leistungsberichte aus der Perspektive eines Endbenutzers und nicht aus irgendwelchen Klischee-Testf\u00e4llen, die sich Entwickler ausdenken. Wenn Sie jedoch Ihre ReactJS-Leistungs\u00fcberwachung verbessern m\u00f6chten, holen Sie sich noch heute eine kostenlose 30-Tage-Testversion von Dotcom-Monitor<\/a><\/span>.<\/p>
\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"
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\u00fcr, dass ReactJS in so kurzer Zeit so viel Popularit\u00e4t erlangt hat. Wenn es um Optionen zum Erstellen von Single-Page-Anwendungen (SPAs) geht, bietet React […]<\/p>\n","protected":false},"author":21,"featured_media":9578,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9706","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/9706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=9706"}],"version-history":[{"count":0,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/posts\/9706\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/media\/9578"}],"wp:attachment":[{"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=9706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=9706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dotcom-monitor.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=9706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}