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

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

Der Bereich JavaScript Profiler wird in Chrome 124 eingestellt. Danach können Sie im Bereich Leistung ein Profil der Node.js-CPU-Leistung erstellen.

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

Bereits in Chrome 58 plante das DevTools-Team, den JS-Profiler nach und nach einzustellen. Dafür gibt es mehrere Gründe:

  • Die App wird nicht mehr aktiv entwickelt. JS Profiler hat seit mehreren Jahren keine größeren Updates erhalten und das Team hat nicht die Ressourcen, um es weiterzuentwickeln.
  • Optimierte Profilerstellung. Das Steuerfeld Leistung wird bereits für alle Arten von Leistungsanalysen verwendet. Da es möglich ist, Profile der JavaScript-CPU-Leistung in Node.js zu erstellen, ist es sinnvoll, aus Konsistenz und Effizienzgründen alles an einem Ort zu konsolidieren.
  • Der Bereich „Leistung“ wurde verbessert. Wir arbeiten kontinuierlich an der Verbesserung dieser Funktion, indem wir neue Funktionen und Verbesserungen hinzufügen, um sie zu einem leistungsstärkeren und nutzerfreundlicheren Tool für die Leistungsanalyse zu machen.

Was sollten Sie nach der Einstellung tun?

Weitere Informationen zum Profiling der CPU-Leistung von JavaScript finden Sie unter Node.js-Leistung messen.

Hier sind einige Tipps zur Verwendung des Bereichs Leistung:

  • Verwenden Sie das Flamendiagramm, um Leistungsengpässe zu erkennen.

Das Flame-Diagramm.

  • Auf den Tabs Bottom-Up und Aufrufabfolge können Sie die Beziehungen zwischen Funktionen nachvollziehen.

Der Tab „Bottom-Up“

Den Tab „Baumstruktur für Anrufe“.

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 setzen wir uns aktiv mit Entwicklerexperten in Verbindung, um den Prototyp zu testen und eventuelle Probleme zu beheben. So können wir sicherstellen, dass das Steuerfeld Leistung den grundlegenden Anforderungen der Profilerstellung entspricht.

Wir führen die Einstellung des JS-Profilers in vier Phasen durch, damit Entwickler genügend Zeit haben, sich darauf vorzubereiten.

Wichtige Probleme und ihre Behebung

Die meisten Bedenken, die wir erhalten haben, konzentrierten sich auf drei Hauptthemen:

  • Unterstützt das Dateiformat .cpuprofile. Der JS-Profiler verwendet ein anderes Dateiformat. Das sollte im Bereich Leistung möglich sein.
  • Langsame Ladezeit Das Laden des Steuerfelds war anscheinend langsam, was den Profilierungsprozess beeinträchtigte.
  • Fehlende Auswahl für JavaScript-VM. Das Fehlen eines JavaScript-VM-Instanzselektors hat in bestimmten Szenarien die Profilerstellungsfunktionen eingeschränkt.

Sehen wir uns diese Probleme und ihre Lösungen genauer an.

Langsame Ladegeschwindigkeit

Entwickler haben uns mitgeteilt, dass das Laden großer Datendateien im Bereich Leistung zu lange gedauert hat und das Tool manchmal sogar abgestürzt ist.

Wir haben die Entwicklertools verwendet, um die Entwicklertools zu analysieren (wir nennen das „Entwicklertools in Entwicklertools“). Wir haben Probleme gefunden und mehrere Optimierungen vorgenommen:

  • Set durch Array-Datenstrukturen ersetzt.
  • Unnötige Map-Datenstrukturen wurden entfernt.
  • Refaktorisierte rekursive Funktionen in iterative (For-Schleifen), um die Nutzung des Speicherstacks zu reduzieren.

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

Weitere Informationen zu unseren Erkenntnissen finden Sie in diesem Blogpost: 400% schnellerer Leistungsbereich durch perf-ception.

Fehlende JavaScript-VM-Auswahl

Im ursprünglichen Prototyp fehlte die Auswahl der JavaScript-VM. Entwickler verwenden sie, um eine bestimmte VM-Instanz zu analysieren.

Wir haben dem Bereich Leistung eine Auswahl für JavaScript-VMs hinzugefügt. Es wird eine Drop-down-Liste mit allen verfügbaren JavaScript-VM-Instanzen angezeigt. Wenn Sie eine Instanz auswählen, wird im Bereich Leistung das CPU-Profil für diese Instanz geladen.

Den Tab „Baumstruktur für Anrufe“.

Unterstützung des Dateiformats cpuprofile

Bisher wurden im Bereich Leistung nur Trace-Dateien unterstützt, also JSON-Dateien mit einem Array von Trace-Ereignissen.

Der JS Profiler unterstützte hingegen CPU-Profile, also Dateien mit der Erweiterung .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, die vorhandenen cpuprofile zu analysieren. Daher werden im Bereich Leistung jetzt sowohl Trace-Dateien als auch CPU-Profile unterstützt. Sie können die Datei cpuprofile in das Feld Leistung importieren und sie wird korrekt geladen.

Im Hintergrund werden die Unterschiede in der Objektstruktur mithilfe eines regulären Ausdrucks erkannt. Wenn der Dateiinhalt mit {"nodes":[ beginnt, handelt es sich um ein CPU-Profil. Andernfalls ist es eine Trace-Datei.

Sobald der Inhaltstyp ermittelt wurde, verarbeiten wir ihn entsprechend. Bei einer Tracedatei werden die Ereignisse analysiert und eine Zeitachse erstellt. Für ein CPU-Profil wird das JSON-Objekt geparst und ein Flammendiagramm erstellt.

Fazit

Im Bereich Leistung können Sie die CPU-Leistung von Websites und Node.js- und Deno-Anwendungen optimieren.

Wenn Sie Feedback oder Vorschläge haben, fügen Sie einen Kommentar zu diesem Programmfehler hinzu oder wenden Sie sich über eine der folgenden Optionen an uns.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools, kannst hochmoderne Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer dies tun.

Chrome-Entwicklertools-Team kontaktieren

Verwende die folgenden Optionen, um die neuen Funktionen, Updates oder andere Aspekte der Entwicklertools zu besprechen.