Runtime-Anrufstatistiken

Das Performance-Panel der DevTools bietet Einblicke in die Laufzeitleistung Ihrer Webanwendung, indem es verschiedene Chrome-interne Metriken visualisiert. Allerdings werden bestimmte Low-Level-V8-Metriken derzeit nicht in DevTools angezeigt. Dieser Artikel führt Sie durch die robusteste Methode, detaillierte V8-interne Metriken, bekannt als Runtime-Anrufstatistiken (Runtime Call Stats, RCS), über chrome://tracing zu sammeln.

Tracing zeichnet das Verhalten des gesamten Browsers auf, einschließlich anderer Registerkarten, Fenster und Erweiterungen. Daher funktioniert es am besten, wenn es in einem sauberen Benutzerprofil durchgeführt wird, mit deaktivierten Erweiterungen und ohne andere geöffnete Browser-Registerkarten:

# Starten Sie eine neue Chrome-Browsersitzung mit einem sauberen Benutzerprofil und deaktivierten Erweiterungen
google-chrome --user-data-dir="$(mktemp -d)" --disable-extensions

Geben Sie die URL der Seite, die Sie messen möchten, in die erste Registerkarte ein, laden Sie die Seite jedoch noch nicht.

Fügen Sie eine zweite Registerkarte hinzu und öffnen Sie chrome://tracing. Tipp: Sie können einfach chrome:tracing ohne die Schrägstriche eingeben.

Klicken Sie auf die Schaltfläche „Record“, um die Trace-Aufzeichnung vorzubereiten. Wählen Sie zunächst „Webentwickler“ und dann „Kategorien bearbeiten“ aus.

Wählen Sie v8.runtime_stats aus der Liste aus. Je nachdem, wie detailliert Ihre Untersuchung ist, können Sie auch andere Kategorien auswählen.

Drücken Sie „Record“ und wechseln Sie zurück zur ersten Registerkarte und laden Sie die Seite. Der schnellste Weg ist die Nutzung von Ctrl/⌘+1, um direkt zur ersten Registerkarte zu springen, und dann Enter zu drücken, um die eingegebene URL zu akzeptieren.

Warten Sie, bis Ihre Seite vollständig geladen ist oder der Puffer voll ist, und stoppen Sie dann die Aufzeichnung.

Suchen Sie nach einem „Renderer“-Abschnitt, der den Seitentitel der aufgezeichneten Registerkarte enthält. Der einfachste Weg, dies zu tun, ist, auf „Prozesse“ zu klicken, dann „Keine“ auszuwählen, um alle Einträge abzuwählen, und anschließend nur den Renderer auszuwählen, für den Sie sich interessieren.

Wählen Sie die Trace-Ereignisse/-Slices aus, indem Sie Shift drücken und ziehen. Stellen Sie sicher, dass Sie alle Abschnitte einschließen, einschließlich CrRendererMain und aller ThreadPoolForegroundWorkers. Am unteren Ende erscheint eine Tabelle mit allen ausgewählten Slices.

Scrollen Sie oben rechts in der Tabelle und klicken Sie auf den Link neben „Runtime call stats table“.

In der Ansicht, die erscheint, scrollen Sie nach unten, um eine detaillierte Tabelle zu sehen, in der der Zeitaufwand von V8 aufgeschlüsselt ist.

Durch das Öffnen einer Kategorie können Sie die Daten weiter vertiefen.

Befehlszeilenschnittstelle

Führen Sie d8 mit --runtime-call-stats aus, um RCS-Metriken über die Befehlszeile zu erhalten:

d8 --runtime-call-stats foo.js