Mit dem Leistungsmonitor erhalten Sie schnell einen Überblick über die Lade- und Laufzeitleistung Ihrer Website.
Übersicht
Im Bereich Leistungsmonitor wird eine Zeitachse mit Leistungsmesswerten in Echtzeit angezeigt. Klicken Sie auf einen Messwert, um ihn ein- oder auszublenden. Sehen Sie dann, wie sich die Grafik ändert, wenn Sie mit Ihrer App interagieren.
Der Leistungsmonitor erfasst die folgenden Messwerte:
- CPU-Auslastung.
- JavaScript-Heap-Größe
- Die Gesamtzahl der DOM-Knoten, JavaScript-Ereignis-Listener, Dokumente und Frames auf der Seite.
- Layout- und Stilneuberechnungen pro Sekunde.
Bereich „Leistungsmonitor“ öffnen
So öffnen Sie den Bereich Leistungsmonitor:
- Öffnen Sie die Entwicklertools.
- Drücken Sie eine der folgenden Tasten, um das Befehlsmenü zu öffnen:
- macOS: Befehlstaste + Umschalttaste + P
- Windows, Linux, ChromeOS: Strg + Umschalttaste + P
- Geben Sie
Performance monitorein, wählen Sie Leistungsmonitor anzeigen aus und drücken Sie die Eingabetaste. In den DevTools wird unten im Fenster der Bereich Leistungsmonitor angezeigt.
Alternativ können Sie rechts oben auf das Weitere Optionen > Weitere Tools > Leistungsmonitor klicken.
Bereich „Leistungsmonitor“ verwenden
Der Leistungsmonitor gibt einen allgemeinen Überblick über die Laufzeitleistung Ihrer Website.
Wenn Sie beobachten, wie sich Messwerte ändern, während Sie mit Ihrer Website interagieren, können sich Verbesserungsmöglichkeiten ergeben.
Eine nützliche Funktion des Leistungsmonitors ist, dass er während der gesamten Seitennavigation erhalten bleibt. Als Frontend-Entwickler können Sie Probleme wie Layout-Trashing vermeiden, indem Sie den Leistungsmonitor öffnen, durch die Website scrollen und die Messwerte DOM-Knoten und Layout/Sek. im Auge behalten.
Wenn Nutzer lange Ladezeiten auf Ihrer Website melden, können Sie mit dem Leistungsmonitor Problembereiche identifizieren.
Ein starker Anstieg der CPU-Auslastung kann beispielsweise auf ineffizienten Code hinweisen. Wenn eine Seite eine große Anzahl von JS-Ereignis-Listenern enthält, kann es sinnvoll sein, den Code zu überarbeiten und diese Anzahl zu reduzieren, um Arbeitsspeicher freizugeben.
Wenn Sie gerade erst mit der Leistungsanalyse beginnen, sollten Sie zuerst das Lighthouse-Steuerfeld verwenden und dann mit dem Steuerfeld „Leistung“ oder dem Leistungsmonitor fortfahren.