Bereich zur Leistungsüberwachung

Dale St. Marthe

Mit der Leistungsüberwachung können Sie sich schnell einen Überblick über die Last- und Laufzeitleistung Ihrer Website verschaffen.

Überblick

Im Bereich Leistungsüberwachung wird eine Zeitachse angezeigt, auf der Leistungsmesswerte in Echtzeit grafisch dargestellt werden. Klicken Sie auf einen Messwert, um ihn ein- oder auszublenden. Sehen Sie sich dann an, wie sich die Grafik verändert, wenn Sie mit Ihrer App interagieren.

Die Leistungsüberwachung erfasst die folgenden Messwerte:

• CPU-Nutzung.
• JavaScript-Heap-Größe.
• Die Gesamtzahl der DOM-Knoten, JavaScript-Ereignis-Listener, Dokumente und Frames auf der Seite.
• Neuberechnungen von Layouts und Stilen pro Sekunde

Bereich „Leistungsüberwachung“ öffnen

So öffnen Sie den Bereich Leistungsüberwachung:

1. Öffnen Sie die Entwicklertools.
2. Öffnen Sie das Befehlsmenü durch Drücken von:
   • macOS: Befehlstaste + Umschalttaste + P
   • Windows, Linux, ChromeOS: Strg + Umschalttaste + P
3. Geben Sie Performance monitor ein, wählen Sie Leistungsüberwachung anzeigen aus und drücken Sie die Eingabetaste. In den Entwicklertools wird unten im Fenster der Entwicklertools der Bereich Leistungsüberwachung angezeigt.

Alternativ können Sie auch rechts oben more_vert Weitere Optionen > Weitere Tools > Leistungsüberwachung auswählen.

Steuerfeld zur Leistungsüberwachung verwenden

Die Leistungsüberwachung gibt Ihnen einen allgemeinen Überblick über die Laufzeitleistung Ihrer Website.

Wenn Sie beobachten, wie sich die Messwerte bei der Interaktion mit Ihrer Website ändern, können Sie Verbesserungsmöglichkeiten erkennen.

Eine nützliche Funktion der Leistungsüberwachung ist, dass sie über die gesamte Seitennavigation hinweg bestehen bleibt. Daher können Sie als Frontend-Entwickler Probleme wie Layout-Thrashing vermeiden, indem Sie die Leistungsüberwachung öffnen, durch deren Website scrollen und die Messwerte DOM-Knoten und Layout/s im Auge behalten.

Wenn Nutzer lange Ladezeiten auf Ihrer Website melden, können Sie mit der Leistungsüberwachung Problembereiche identifizieren.

Ein starker Anstieg der CPU-Nutzung kann beispielsweise auf ineffizienten Code hinweisen. Wenn eine Seite eine hohe Anzahl von JS-Ereignis-Listenern enthält, kann es außerdem von Vorteil sein, den Code zu refaktorieren und diese Anzahl zu reduzieren, um Arbeitsspeicher freizugeben.

Wenn Sie gerade erst mit der Leistungsanalyse beginnen, empfehlen wir, zuerst das Steuerfeld Lighthouse zu verwenden und sich dann über das Steuerfeld Leistung oder die Leistungsüberwachung genauer anzusehen.