Bereich zur Leistungsüberwachung

Dale St. Marthe

Verwenden Sie die Leistungsüberwachung, um sich schnell einen Überblick über die Lade- und Laufzeitleistung Ihrer Website zu verschaffen.

Überblick

Im Bereich Leistungsüberwachung wird eine Zeitleiste angezeigt, auf der Leistungsmesswerte in Echtzeit grafisch dargestellt werden. Klicken Sie auf einen Messwert, um ihn ein- oder auszublenden. Schauen Sie sich dann an, wie sich das Diagramm bei der Interaktion mit Ihrer App ändert.

Mit der Leistungsüberwachung werden die folgenden Messwerte erfasst:

• CPU-Nutzung.
• Größe des JavaScript-Heap.
• Die Gesamtzahl der DOM-Knoten, JavaScript-Ereignis-Listener, Dokumente und Frames auf der Seite.
• Layouts und Stilneuberechnungen 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 „Entwicklertools“ der Bereich Leistungsüberwachung angezeigt.

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

Bereich „Leistungsüberwachung“ verwenden

Die Leistungsüberwachung gibt Aufschluss ü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 während der Seitennavigation erhalten bleibt. Als Front-End-Entwickler können Sie also Probleme wie Layoutüberschreitungen vermeiden, indem Sie den Leistungsmonitor öffnen, durch die Website scrollen und die Messwerte für DOM-Knoten und Layout/Sekunde im Auge behalten.

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

Beispielsweise kann ein starker Anstieg der CPU-Auslastung auf ineffizienten Code hindeuten. Wenn eine Seite eine große Anzahl von JS-Event-Listenern enthält, kann es generell von Vorteil sein, den Code zu refaktorieren und die Zahlen zu reduzieren, um Arbeitsspeicher freizugeben.

Wenn Sie gerade erst mit der Analyse der Leistung beginnen, empfehlen wir, zuerst das Steuerfeld Lighthouse zu verwenden und dann im Steuerfeld Leistung oder in der Leistungsüberwachung weitere Untersuchungen anzustellen.