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 JavaScript Profiler eingestellt? (JS-Profiler)

Bereits bei Chrome 58 plante das Entwicklertools-Team, JS Profiler einzustellen. Dafür gibt es mehrere Gründe:

  • Sie wird nicht mehr aktiv weiterentwickelt. 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“ ist besser. 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 zur Erstellung eines Profils für die JavaScript-CPU-Leistung finden Sie unter Profil für Node.js-Leistung erstellen.

Hier einige Tipps zur Verwendung des Steuerfelds Leistung:

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

Das Flame-Diagramm.

  • Sehen Sie sich die Tabs Bottom-up und Aufrufstruktur an, um mehr über die Beziehungen zwischen den Funktionen zu erfahren.

Der Bottom-up-Tab.

Tab "Aufrufstruktur"

Wie gehen wir mit der Einstellung um?

Wir haben einen Prototyp entwickelt und den Request for Comments (RFC) 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 stellen JS Profiler nach und nach in 4 Phasen ein, damit Entwickler genügend Zeit haben, sich auf die neue Version einzustellen.

Wichtige Probleme und ihre Behebung

Unter dem Feedback, das wir erhalten haben, ging es vor allem um drei Hauptthemen:

  • Unterstützt .cpuprofile-Dateiformat. JS Profiler verwendet ein anderes Dateiformat. Das sollte im Bereich Leistung möglich sein.
  • Langsame Ladegeschwindigkeit. Die Ladegeschwindigkeit des Bereichs schien langsam zu sein, was den Profilerstellungsprozess behindert.
  • Fehlender JavaScript-VM-Selektor. Das Fehlen eines JavaScript-VM-Instanzselektors hat in bestimmten Szenarien die Profilerstellungsfunktionen eingeschränkt.

Werfen wir einen Blick auf die einzelnen Probleme und wie wir sie behoben haben.

Langsame Ladegeschwindigkeit

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

Wir haben DevTools verwendet, um die Entwicklertools zu analysieren (wir nennen sie „DevTools-on-DevTools“). Wir haben Probleme gefunden 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) refaktoriert, um die Speicher-Stack-Nutzung zu reduzieren.

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

In diesem Blogpost erfährst du mehr darüber: A 400% faster Performance panel through performance.

Der fehlende JavaScript-VM-Selektor

Im ersten Prototyp fehlte der JavaScript-VM-Selektor. Entwickler können damit Daten aufschlüsseln und sich auf die Analyse einer bestimmten VM-Instanz konzentrieren.

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

Tab "Aufrufstruktur"

Unterstützung des Dateiformats cpuprofile

Bisher wurden im Bereich Leistung nur Trace-Dateien unterstützt, bei denen es sich um JSON-Dateien mit einem Array von Trace-Ereignissen handelt.

JS Profiler unterstützte jedoch CPU-Profile, bei denen es sich um Dateien mit der Erweiterung .cpuprofile handelt, 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 hindert Entwickler nicht daran, die vorhandenen cpuprofile zu analysieren. Daher unterstützt das Steuerfeld Leistung jetzt sowohl Trace-Dateien als auch CPU-Profile. 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, ist es ein CPU-Profil. Andernfalls ist es eine Trace-Datei.

Sobald die Art der Inhalte identifiziert wurde, verarbeiten wir sie entsprechend. Bei einer Ablaufverfolgungsdatei werden die Ereignisse analysiert und eine Zeitachse erstellt. Bei einem CPU-Profil parsen Sie das JSON-Objekt und erstellen ein Flame-Diagramm.

Fazit

Im Bereich Leistung können Sie die Profilerstellung sowohl für Websites als auch für die CPU-Leistung in 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

Sie können Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Ü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 es tun.

Kontaktaufnahme mit dem Team für Chrome-Entwicklertools

Mit den folgenden Optionen kannst du die neuen Funktionen und Änderungen des Beitrags oder andere Aspekte der Entwicklertools besprechen.

  • Senden Sie uns über crbug.com einen Vorschlag oder Feedback.
  • Problem mit den Entwicklertools über Weitere Optionen melden Mehr > Hilfe > Hier kannst du Probleme mit den Entwicklertools in den Entwicklertools melden.
  • Twittern Sie unter @ChromeDevTools.
  • Hinterlasse Kommentare in den YouTube-Videos mit den Neuerungen in den Entwicklertools oder in YouTube-Videos mit Tipps zu den Entwicklertools.