Performance Profiling JavaScript

Visual Studio Code unterstützt das Sammeln und Anzeigen von Leistungsprofilen für JavaScript-Programme. Um zu beginnen, müssen Sie zuerst den Debugger für Ihr Node.js-Programm oder Ihre Browser-App konfiguriert haben.

Arten von Profilen

Je nachdem, was Sie optimieren möchten, gibt es verschiedene Arten von Profilen, die Sie erstellen können.

CPU-Profil – Ein CPU-Profil zeigt Ihnen, wo Ihr Programm seine Zeit in JavaScript verbringt. Denken Sie daran, dass, obwohl Sie auf asynchrone Promises oder Callbacks warten können, zu jedem Zeitpunkt nur ein JavaScript-Ausdruck ausgeführt wird. Das CPU-Profil sammelt etwa 10.000 Samples pro Sekunde, um Ihnen mitzuteilen, welcher Ausdruck – falls vorhanden – gerade ausgeführt wird.
Heap-Profil – Ein Heap-Profil zeigt Ihnen, wie Speicher im Laufe der Zeit in Ihrem Programm zugewiesen wird. Die Speicherzuweisung kann kostspielig sein, und die Reduzierung der Menge des vom Code zugewiesenen Speichers kann zu Leistungssteigerungen führen.
Heap-Snapshot – Ein Heap-Snapshot ist eine Momentaufnahme, die zeigt, wo Ihr Programm Speicher zugewiesen hat. Wenn Sie feststellen, dass Ihr Programm viel RAM verwendet und Sie herausfinden möchten, woher es kommt, kann ein Heap-Snapshot nützlich sein. Beachten Sie, dass das Sammeln eines Heap-Snapshots für komplexere Programme mehrere Minuten dauern kann und die Anzeige von Heap-Snapshots im integrierten Editor derzeit nicht unterstützt wird.

Sammeln eines Profils

Um ein Profil zu sammeln, müssen Sie Ihr Programm debuggen. Sobald Sie dies tun, können Sie ein Profil auf verschiedene Arten sammeln:

Verwenden der "Aufzeichnen"-Schaltfläche in der Ansicht Aufrufliste. Dies ermöglicht Ihnen, CPU-Profile, Heap-Profile und Heap-Snapshots zu erstellen.
Durch Aufrufen von console.profile() in Ihrem Programm. Dies sammelt ein CPU-Profil.

Aufzeichnen mit der Aufnahmeschaltfläche

Wechseln Sie im Debugging-Modus zur Ansicht "Ausführen und Debuggen" (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und suchen Sie die Ansicht Aufrufliste. Fahren Sie mit der Maus über die Sitzung, die Sie debuggen möchten, und wählen Sie die Schaltfläche Leistungsprofil erstellen. Sie können diesen Befehl auch über die Befehlspalette ausführen (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

VS Code fragt Sie dann, welche Art von Leistungsprofil Sie erstellen möchten. Wählen Sie diejenige aus, die für Sie relevant ist.

Schließlich fragt VS Code, wann Sie mit dem Erstellen eines Profils aufhören möchten. Sie können wählen zwischen

Das Profil erstellen, bis Sie es manuell stoppen.
Das Profil für eine festgelegte Dauer erstellen.
Das Profil erstellen, bis Sie einen bestimmten Haltepunkt erreichen.

Wenn Sie die erste Option gewählt haben, können Sie das Profil stoppen, indem Sie auf das große rote "Aufzeichnen"-Symbol in der Debug-Symbolleiste klicken. Nachdem das Profil gesammelt wurde, wird der Profil-Viewer automatisch geöffnet.

Verwenden von console.profile

Sie können Ihren Code manuell mit Aufrufen von console.profile zum Starten eines Profils und console.profileEnd zum Stoppen eines Profils instrumentieren. Ein CPU-Profil wird zwischen diesen beiden Aufrufstellen gesammelt.

console.profile();
doSomeVeryExpensiveWork();
console.profileEnd();

Die resultierende .cpuprofile-Datei wird automatisch in Ihrem Arbeitsbereich gespeichert. Sie können diese Datei auswählen, um sie im integrierten Profil-Viewer zu öffnen.

Analysieren eines Profils

Tabellenansicht

VS Code verfügt über einen integrierten Visualisierer, der die Anzeige von JavaScript .cpuprofile- und .heapprofile-Dateien unterstützt. Wenn Sie eine dieser Dateien öffnen, sehen Sie zunächst eine Tabellenansicht, die etwa so aussieht:

Dies ist eine Bottom-up-Ansicht Ihres Programms. Jede Zeile stellt eine Funktion in Ihrem Programm dar, und standardmäßig sind sie nach der Zeit sortiert, die in dieser spezifischen Funktion verbracht wurde. Dies wird auch als "Self Time" bezeichnet. Die "Total Time" einer Funktion ist die Summe der Zeit, die in dieser Funktion und allen von ihr aufgerufenen Funktionen verbracht wurde. Sie können jede Tabellenzeile erweitern, um zu sehen, von wo aus die Funktion aufgerufen wurde.

Betrachten Sie zum Beispiel den folgenden Code

function a() {
  doSomethingFor5Seconds();
  b();
}

function b() {
  doSomethingFor3Seconds();
}

a();

In diesem Fall wäre die "Self Time" für a 5 Sekunden und die "Total Time" für a 8 Sekunden. Sowohl die "Self Time" als auch die "Total Time" für b betragen 3 Sekunden. Heap-Profile funktionieren auf die gleiche Weise, verwenden aber "Self Size" und "Total Size", um die Menge des Speichers anzugeben, der in jeder Funktion oder ihren Aufrufern zugewiesen wurde.

Flame-Ansicht

Die Tabellenansicht ist in bestimmten Fällen nützlich, aber oft möchten Sie vielleicht eine visuellere Darstellung des Profils sehen. Dies können Sie tun, indem Sie auf das Flammen-Symbol 🔥 in der oberen rechten Ecke der Tabellenansicht klicken. Wenn Sie dies noch nicht getan haben, werden Sie aufgefordert, eine zusätzliche Erweiterung zu installieren, die die Flame-Ansicht bereitstellt.

Dies mag anfangs verwirrend erscheinen, aber keine Angst, wir werden es erklären!

Bei CPU-Profilen ist die horizontale Achse die Zeitachse des Profils, sodass Sie sehen können, was Ihr Programm zu jedem Zeitpunkt tat. Bei Heap-Profilen ist die horizontale Achse der vom Programm insgesamt zugewiesene Speicher.

Jeder Balken oder jede "Flamme" im Diagramm ist eine Aufrufliste. Der äußerste, oberste Funktionsaufruf (oder der "Boden" der Aufrufliste) wird am oberen Rand des Editors angezeigt, und die von ihm aufgerufenen Funktionen werden darunter angezeigt. Die Breite des Balkens wird durch seine Gesamtzeit oder sein Gesamtvolumen bestimmt.

Sie können auf einen Eintrag im Flammen-Diagramm klicken, um weitere Informationen dazu anzuzeigen, und Sie können mit dem Mausrad hinein- und herauszoomen. Sie können auch überall auf dem Diagramm ziehen, um zu navigieren, wenn Sie hineingezoomt haben.

Linkslastige Ansicht

Wenn Sie mit einem CPU-Profil arbeiten, besteht eine gute Chance, dass das Flammen-Diagramm, das Sie betrachten, nicht so verständlich ist wie das obige. Möglicherweise haben Sie viele einzelne Aufruflisten, die so aussehen:

Zur einfacheren Analyse profiliert VS Code eine "linkslastige" Ansicht, die alle ähnlichen Aufruflisten zusammenfasst.

Dies wechselt von einer chronologischen Ansicht des Profils zu etwas Ähnlicherem dem Heap-Profil. Die horizontale Achse ist immer noch die gesamte Profildauer, aber jeder Balken repräsentiert die Gesamtzeit dieses Funktionsaufrufs über alle Zeiten, zu denen er von diesem Stack aus aufgerufen wurde.

Diese Ansicht ist für bestimmte Anwendungen, wie z. B. Server, weitaus nützlicher, bei denen einzelne Aufrufe relativ schnell sein können, Sie aber herausfinden möchten, welche Funktionen insgesamt am kostspieligsten waren, über viele Aufrufe hinweg.

12/10/2025