Performance-Profiling für JavaScript

Visual Studio Code unterstützt das Erfassen und Anzeigen von Performance-Profilen für JavaScript-Programme. Um zu beginnen, müssen Sie zunächst den Debugger für Ihr Node.js-Programm oder Ihre Browser-App konfiguriert haben.

Profilarten

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 während der Ausführung von JavaScript Zeit verbringt. Denken Sie daran, dass zwar auf asynchrone Promises oder Callbacks gewartet werden kann, aber immer nur ein JavaScript-Ausdruck gleichzeitig ausgeführt wird. Das CPU-Profil sammelt etwa 10.000 Stichproben pro Sekunde, um Ihnen mitzuteilen, welcher Ausdruck – falls vorhanden – in diesem Moment ausgeführt wird.
• Heap-Profil – Ein Heap-Profil zeigt Ihnen, wie Arbeitsspeicher im Laufe der Zeit in Ihrem Programm belegt wird. Die Speicherzuweisung kann kostspielig sein, und die Reduzierung der Speichermenge, die Ihr Code belegt, kann zu Performance-Gewinnen führen.
• Heap-Snapshot – Ein Heap-Snapshot ist eine Momentaufnahme der Speicherbelegung Ihres Programms. Wenn Sie feststellen, dass Ihr Programm viel RAM verbraucht und herausfinden möchten, woher das kommt, kann ein Heap-Snapshot nützlich sein. Beachten Sie, dass das Erstellen eines Heap-Snapshots bei komplexeren Programmen mehrere Minuten dauern kann und die Anzeige von Heap-Snapshots derzeit im eingebauten Editor nicht unterstützt wird.

Erfassen eines Profils

Um ein Profil zu erfassen, müssen Sie Ihr Programm debuggen. Sobald dies der Fall ist, können Sie ein Profil mit wenigen Methoden erfassen:

• Verwendung der „Aufnehmen“-Schaltfläche in der Aufrufliste (Call Stack)-Ansicht. Dies ermöglicht Ihnen die Erstellung von CPU-Profilen, Heap-Profilen und Heap-Snapshots.
• Durch den Aufruf von console.profile() in Ihrem Programm. Dies erfasst ein CPU-Profil.

Verwendung der Aufnehmen-Schaltfläche

Sobald Sie debuggen, wechseln Sie zur Ansicht „Ausführen und Debuggen“ (⇧⌘D (Windows, Linux Ctrl+Shift+D)) und suchen Sie die Aufrufliste-Ansicht. Fahren Sie mit der Maus über die Sitzung, die Sie debuggen möchten, und wählen Sie die Schaltfläche Performance-Profil aufnehmen. Sie können diesen Befehl auch über die Befehlspalette ausführen (⇧⌘P (Windows, Linux Ctrl+Shift+P)).

VS Code wird Sie dann fragen, welche Art von Performance-Profil Sie aufnehmen möchten; wählen Sie das für Sie relevante aus.

Schließlich wird VS Code Sie fragen, wann die Profilaufnahme beendet werden soll. Sie können wählen zwischen:

• Profil aufnehmen, bis Sie es manuell stoppen.
• Profil für eine festgelegte Dauer aufnehmen.
• Profil aufnehmen, bis Sie einen bestimmten Haltepunkt (Breakpoint) erreichen.

Wenn Sie die erste Option gewählt haben, können Sie das Profil stoppen, indem Sie auf das große rote „Aufnehmen“-Symbol in der Debug-Symbolleiste klicken. Nachdem das Profil erfasst wurde, öffnet sich automatisch der Profil-Viewer.

Verwendung von console.profile

Sie können Ihren Code manuell instrumentieren, indem Sie console.profile aufrufen, um ein Profil zu starten, und console.profileEnd, um es zu beenden. Zwischen diesen beiden Aufrufen wird ein CPU-Profil erstellt.

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

Die resultierende .cpuprofile-Datei wird automatisch in Ihrem Arbeitsbereich-Ordner 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 ein integriertes Visualisierungstool, das die Anzeige von JavaScript .cpuprofile- und .heapprofile-Dateien unterstützt. Wenn Sie eine dieser Dateien öffnen, erhalten Sie zunächst eine Tabellenansicht, die in 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 danach sortiert, wie viel Zeit in dieser spezifischen Funktion verbracht wurde. Dies wird auch als „Eigenzeit“ (Self Time) bezeichnet. Die „Gesamtzeit“ (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 diese Funktion aufgerufen wurde.

Betrachten Sie zum Beispiel den folgenden Code:

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

function b() {
  doSomethingFor3Seconds();
}

a();

In diesem Fall beträgt die Eigenzeit für a 5 Sekunden und die Gesamtzeit für a 8 Sekunden. Sowohl die Eigenzeit als auch die Gesamtzeit für b betragen 3 Sekunden. Heap-Profile funktionieren auf die gleiche Weise, verwenden jedoch Eigen-Größe und Gesamt-Größe, um die Menge an Speicher anzugeben, die in jeder Funktion oder deren aufgerufenen Funktionen belegt wurde.

Flame-Ansicht

Die Tabellenansicht ist in bestimmten Fällen nützlich, aber oft möchten Sie eine visuellere Darstellung des Profils sehen. Sie können dies tun, indem Sie auf das Flammen-Symbol 🔥 oben rechts in der Tabellenansicht klicken. Falls noch nicht geschehen, werden Sie aufgefordert, eine zusätzliche Erweiterung zu installieren, die den Flame-View-Editor bereitstellt.

Das mag anfangs verwirrend aussehen, aber keine Sorge, wir machen es verständlich!

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

Jeder Balken, oder jede „Flamme“, in der Grafik ist eine Aufrufliste (Call Stack). Der äußerste, oberste Funktionsaufruf (oder der „Boden“ des Call Stacks) wird oben im Editor angezeigt, und die Funktionen, die er aufruft, werden darunter angezeigt. Die Breite des Balkens wird durch seine Gesamtzeit oder seinen Gesamtspeicher bestimmt.

Sie können auf einen Eintrag im Flame-Graph klicken, um weitere Informationen dazu anzuzeigen, und mit dem Mausrad hinein- und herauszoomen. Sie können auch an eine beliebige Stelle im Diagramm ziehen, um zu navigieren, falls Sie hineingezoomt haben.

Links-lastige Ansicht (Left-heavy)

Wenn Sie mit einem CPU-Profil arbeiten, besteht eine gute Chance, dass der Flame-Graph, den Sie betrachten, nicht so verständlich ist wie der obige. Sie haben möglicherweise viele einzelne Aufruflisten, die so aussehen:

Zur einfacheren Analyse bietet VS Code eine „links-lastige“ Ansicht, die alle ähnlichen Aufruflisten gruppiert.

Dies wechselt von einer chronologischen Ansicht des Profils zu etwas, das dem Heap-Profil ähnlicher ist. Die horizontale Achse ist immer noch die Gesamtdauer des Profils, aber jeder Balken repräsentiert die Gesamtzeit dieses Funktionsaufrufs über alle Male hinweg, die er von diesem Stack aus aufgerufen wurde.

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