Auf Wiedersehen JS Profiler, CPU-Profilerstellung mit dem Steuerfeld „Leistung“

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

Der JavaScript Profiler-Bereich wird in Chrome 124 eingestellt. Verwenden Sie künftig den Bereich Leistung, um Profile für die Node.js-CPU-Leistung zu erstellen.

Warum wird der JavaScript-Profiler eingestellt? (JS-Profiler)

Schon ab Chrome 58 plante das Entwicklungsteam, den JS Profiler bald einzustellen. Dafür gibt es mehrere Gründe:

  • Sie wird nicht mehr aktiv weiterentwickelt. Der JS-Profiler hat seit mehreren Jahren keine größeren Updates erhalten und das Team hat nicht die Ressourcen, um ihn weiterzuentwickeln.
  • Optimierte Profilerstellung: Der Bereich Leistung wird bereits für alle Arten von Leistungsanalysen verwendet. Da es möglich ist, ein Profil der JavaScript-CPU-Leistung in Node.js zu erstellen, ist es sinnvoll, alles an einem Ort zwecks Konsistenz und Effizienz zu konsolidieren.
  • Der Bereich „Leistung“ ist besser. Wir arbeiten kontinuierlich daran, es durch neue Funktionen und Verbesserungen zu optimieren und es zu einem noch leistungsstärkeren und nutzerfreundlicheren Tool für Leistungsanalysen zu machen.

Was sollten Sie nach der Einstellung tun?

Weitere Informationen zur Profilerstellung für die JavaScript-CPU-Leistung finden Sie unter Profil der Node.js-Leistung erstellen.

Hier einige Tipps zur Verwendung des Steuerfelds Leistung:

  • Mithilfe des Flame-Diagramms können Sie Leistungsengpässe identifizieren.

Das Flammendiagramm

  • Auf den Tabs Bottom-up und Aufrufstruktur sind die Beziehungen zwischen Funktionen verdeutlicht.

Der Tab „Bottom-up“-Ansatz.

Tab „Anrufstruktur“

Wie gehen wir mit der Einstellung um?

Wir haben einen Prototyp entwickelt und den Request for Comments (RFC) öffentlich auf GitHub veröffentlicht, um Feedback von Entwicklern einzuholen.

Darüber hinaus wenden wir uns aktiv an Entwicklerexperten, um den Prototyp zu testen und mögliche Bedenken oder Probleme zu beheben, um sicherzustellen, dass der Bereich Leistung die grundlegenden Anforderungen an die Profilerstellung erfüllt.

Wir stellen den JS-Profiler in 4 Phasen nach und nach ein, damit Entwickler ausreichend Zeit haben, sich auf die neue Version einzustellen.

Wichtige Probleme und wie wir sie behoben haben

In dem Feedback, das wir erhalten haben, konzentrierten sich die dringendsten Bedenken auf drei Hauptprobleme:

  • Das Dateiformat .cpuprofile wird unterstützt. Der JS Profiler verwendet ein anderes Dateiformat. Der Bereich Leistung sollte dies unterstützen.
  • Langsame Ladegeschwindigkeit Die Ladegeschwindigkeit des Panels schien langsam zu sein, was die Profilerstellung beeinträchtigte.
  • JavaScript-VM-Selektor fehlt. Das Fehlen eines JavaScript-VM-Instanzselektors beschränkt die Profilfunktionen in bestimmten Szenarien.

Werfen wir nun einen Blick auf diese Probleme und darauf, wie wir sie behoben haben.

Langsame Ladegeschwindigkeit

Entwickler haben uns mitgeteilt, dass der Leistungsbereich beim Laden großer Datendateien zu lange gedauert hat und manchmal sogar abgestürzt ist.

Wir haben die Entwicklertools verwendet, um sie zu analysieren. Wir nennen sie „DevTools-on-DevTools“. Wir haben Probleme festgestellt und mehrere Optimierungen vorgenommen:

  • Set wurde durch Array-Datenstrukturen ersetzt.
  • Unnötige Map-Datenstrukturen wurden entfernt.
  • Refaktorierte rekursive Funktionen wurden in iterativ (für Schleifen) überarbeitet, um die Arbeitsspeicher-Stack-Nutzung zu reduzieren.

Durch die Behebung dieser Engpässe haben wir das Laden großer Dateien um 80% beschleunigt. 🎉

Weitere Informationen dazu, was wir gelernt haben, finden Sie in diesem Blogpost: A 400% faster performance panel through perf-ception.

Der fehlende JavaScript-VM-Selektor

Im ersten Prototyp fehlte der JavaScript-VM-Selektor. Entwickler können damit eine bestimmte VM-Instanz genauer analysieren.

Wir haben dem Bereich Leistung jetzt einen JavaScript-VM-Selektor hinzugefügt. Sie sehen eine Drop-down-Liste aller verfügbaren JavaScript-VM-Instanzen. Wenn Sie eine Instanz auswählen, wird im Bereich Leistung das CPU-Profil für diese bestimmte Instanz geladen.

Tab „Anrufstruktur“

Unterstützung des Dateiformats cpuprofile

Bisher wurden im Bereich Leistung nur Trace-Dateien unterstützt. Das sind JSON-Dateien mit einer Reihe von Trace-Ereignissen.

Andererseits hat der JS Profiler CPU-Profile unterstützt. Das sind Dateien mit der Endung .cpuprofile, die ein JSON-Objekt enthalten. Sie sehen so aus:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

Der neue Workflow sollte Entwickler nicht daran hindern, vorhandene cpuprofile zu analysieren. Daher unterstützt der Bereich Leistung jetzt sowohl Trace-Dateien als auch CPU-Profile. Sie können die Datei cpuprofile in den Bereich Leistung importieren. Sie wird dann korrekt geladen.

Im Hintergrund erkennen wir die Unterschiede bei der Objektstruktur mithilfe eines regulären Ausdrucks. Wenn der Dateiinhalt mit {"nodes":[ beginnt, ist es ein CPU-Profil. Andernfalls handelt es sich um eine Ablaufverfolgungsdatei.

Sobald die Art der Inhalte identifiziert wurde, verarbeiten wir sie entsprechend. Bei einer Trace-Datei parsen wir die Ereignisse und erstellen eine Zeitachse. Für ein CPU-Profil parsen wir das JSON-Objekt und erstellen ein Flammendiagramm.

Fazit

Im Bereich Leistung finden Sie eine optimierte Profilerstellung sowohl für Websites als auch für die CPU-Leistung in Node.js- und Deno-Anwendungen.

Wenn Sie Feedback oder Vorschläge haben, können Sie dem Fehler einen Kommentar hinzufügen oder sich über eine der folgenden Optionen an uns wenden.

Vorschaukanäle herunterladen

Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.

  • Sende uns über crbug.com Vorschläge oder Feedback.
  • Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen   Mehr   > Hilfe > Probleme mit den Entwicklertools melden.
  • Senden Sie einen Tweet an @ChromeDevTools.
  • Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.