Profilierung von TypeScript-Code: Engpässe finden

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Einleitung: Warum TypeScript profilieren?

TypeScript ist ein leistungsstarkes Werkzeug für die Entwicklung skalierbarer Anwendungen, aber selbst der am besten typisierte Code kann unter versteckten Leistungsproblemen leiden. Engpässe entstehen durch ineffiziente Algorithmen, übermäßige I/O-Operationen, unangemessenes Speichermanagement oder langsame Berechnungen. Profiling ermöglicht es Ihnen, diese Bereiche zu identifizieren und gezielt zu optimieren.

In diesem Artikel werden wir praktische Methoden zum Profiling von TypeScript-Code untersuchen: von integrierten Browsertools bis hin zu speziellen Dienstprogrammen für Node.js. Sie lernen, wie Sie langsame Funktionen finden, den Aufrufstapel analysieren und datengestützte Entscheidungen treffen.

TypeScript-Profiling-Werkzeuge

Das Profiling von TypeScript-Code unterscheidet sich nicht vom Profiling von JavaScript, da TypeScript zu JS kompiliert wird. Es ist jedoch wichtig zu bedenken, dass der ursprüngliche TypeScript-Quellcode zusätzliche Abstraktionen enthalten kann (Generics, Dekorateure, Interfaces), die nach der Kompilierung nicht offensichtliche Muster erzeugen können.

1. Chrome DevTools Performance

Für Frontend-Anwendungen ist der Performance-Tab in Chrome DevTools die beste Wahl. Er zeichnet die Seitenaktivität auf und zeigt ein Flammendiagramm, die Ausführungszeit von Funktionen, Ereignisse und die Speichernutzung an.

So wird's gemacht:

Öffnen Sie DevTools (F12) → Performance-Tab.
Klicken Sie auf die Aufnahmetaste (Kreis), führen Sie die gewünschte Aktion auf der Seite aus.
Stoppen Sie die Aufnahme und studieren Sie das Flammendiagramm.

Beispiel: Wenn Sie eine Array-Verarbeitungsfunktion haben, die länger als 100 ms braucht, sehen Sie diese als breiten Block im Diagramm. Klicken Sie darauf – DevTools zeigt den Quellcode (falls Source Maps aktiviert sind) und die Ausführungszeit an.

// Original TypeScript codefunction processItems(items: number[]): number[] {  return items    .filter(x => x > 10)    .map(x => x * 2)    .reduce((acc, val) => acc + val, 0);}

Nach dem Profiling könnten Sie feststellen, dass filter und map zwischenzeitliche Arrays erstellen, was die Leistung bei großen Datenmengen verlangsamt. Die Optimierung besteht darin, die Kette durch einen einzigen Durchlauf mit for oder reduce zu ersetzen.

2. Node.js Integrierter Profiler

Für serverseitigen Node.js-Code verwenden Sie den integrierten V8-Profiler. Er sammelt Aufrufstapel-Samples und ermöglicht es Ihnen zu analysieren, welche Funktionen die meiste Zeit beanspruchen.

Ausführung:

node --prof your-compiled-file.js

Nach der Ausführung wird eine Datei namens isolate-0x...-v8.log erstellt. Konvertieren Sie sie in ein lesbares Format:

node --prof-process isolate-0x...-v8.log > profile.txt

In der resultierenden Datei sehen Sie eine Tabelle mit den Spalten: ticks (Anzahl der Samples), total (Gesamtzeit), nonlib (Zeit ohne Bibliotheken) und Funktionsname. Funktionen mit der höchsten Anzahl von Ticks sind Ihre Kandidaten für die Optimierung.

3. ts-node und Source Maps

Bei der Entwicklung mit TypeScript wird häufig ts-node verwendet, um Code ohne vorherige Kompilierung auszuführen. Stellen Sie für das Profiling sicher, dass Source Maps in der tsconfig.json aktiviert sind:

{  "compilerOptions": {    "sourceMap": true,    "inlineSourceMap": true  }}

Starten Sie dann die Anwendung mit dem --inspect-Flag:

node --inspect -r ts-node/register src/app.ts

Öffnen Sie Chrome und navigieren Sie zu chrome://inspect. Sie sehen Ihre Anwendung und können DevTools zum Profiling verwenden, wobei der ursprüngliche TypeScript-Code anstelle des kompilierten JavaScripts angezeigt wird.