Profilierung von TypeScript-Code: Engpässe für Anfänger finden

Einleitung: Warum die Profilierung von TypeScript für die Leistung wichtig ist

Wenn Sie eine Anwendung in TypeScript schreiben, kann sie bei kleinen Datenmengen schnell laufen. Mit dem Wachstum des Projekts treten jedoch Engpässe auf – Codeabschnitte, die die Ausführung verlangsamen. Die Profilierung hilft, diese Problemstellen zu finden und zu verstehen, wo die meiste Zeit verbraucht wird.

In diesem Artikel besprechen wir, wie man TypeScript-Code mit den integrierten Tools des Browsers und Node.js profiliert. Sie erfahren, wie Sie langsame Funktionen finden, den Aufrufstapel analysieren und kritische Abschnitte optimieren.

Der Artikel richtet sich an Anfänger-Entwickler, die bereits mit den Grundlagen von TypeScript vertraut sind und die Leistung ihrer Anwendungen verbessern möchten.

Grundlegende Konzepte der Profilierung

Profilierung ist der Prozess der Datenerfassung darüber, wie ein Programm ausgeführt wird: wie viel Zeit Funktionen in Anspruch nehmen, wie oft sie aufgerufen werden, welche Ressourcen verbraucht werden.

Im Kontext von TypeScript ist es wichtig, einige Schlüsselkennzahlen zu verstehen:

\n
• Ausführungszeit – wie viele Millisekunden jede Funktion benötigt.
\n
• Anzahl der Aufrufe – wie oft eine Funktion aufgerufen wird.
\n
• Speicher – wie viel Speicher zugewiesen und freigegeben wird.
\n
• Aufrufstapel – die Reihenfolge der Funktionsaufrufe.
\n

Zur Profilierung von TypeScript-Code können sowohl Browser-Tools (Chrome DevTools) als auch Node.js-Dienstprogramme (z. B. --inspect oder clinic.js) verwendet werden.

Tools zur Profilierung von TypeScript

Chrome DevTools für clientseitigen Code

Wenn Ihre TypeScript-Anwendung im Browser läuft, ist das beste Tool die integrierte Chrome DevTools. Öffnen Sie den Tab Performance und klicken Sie auf die Aufnahmetaste. Führen Sie eine Aktion auf der Seite aus, stoppen Sie die Aufnahme und erhalten Sie eine Zeitachse.

Beispiel einer Analyse: Sie sehen, dass die Funktion processData 300 ms benötigt. Dies ist ein Signal zur Optimierung.

Node.js und der integrierte Profiler

Für serverseitigen TypeScript-Code (Node.js) verwenden Sie das Flag --inspect oder --prof. Zum Beispiel:

node --inspect dist/app.js

Öffnen Sie dann chrome://inspect im Browser und verbinden Sie sich mit dem Prozess. Sie erhalten die gleichen DevTools-Funktionen, jedoch für serverseitigen Code.

clinic.js – ein einfaches Dienstprogramm für Node.js

Installieren Sie clinic.js global:

npm install -g clinic

Starten Sie die Profilierung:

clinic doctor -- node dist/app.js

Das Dienstprogramm zeigt einen übersichtlichen Bericht mit Empfehlungen an.

Engpässe in der Praxis finden

Beispiel 1: Langsame Array-Sortierung

Angenommen, Sie haben eine Funktion zum Sortieren eines großen Arrays von Objekten:

interface User {\n    id: number;\n    name: string;\n    age: number;\n}\n\nfunction sortUsers(users: User[]): User[] {\n    return users.sort((a, b) => {\n        // Langsamer String-Vergleich\n        const nameA = a.name.toLowerCase();\n        const nameB = b.name.toLowerCase();\n        if (nameA < nameB) return -1;\n        if (nameA > nameB) return 1;\n        return 0;\n    });\n}

Bei der Profilierung werden Sie feststellen, dass toLowerCase() bei jedem Vergleich aufgerufen wird, und das können O(n log n) sein. Der Engpass ist die wiederholte String-Konvertierung.

Optimierung: Konvertieren Sie die Strings vorab:

function sortUsersOptimized(users: User[]): User[] {\n    return users\n        .map(user => ({\n            ...user,\n            _lowerName: user.name.toLowerCase()\n        }))\n        .sort((a, b) => {\n            if (a._lowerName < b._lowerName) return -1;\n            if (a._lowerName > b._lowerName) return 1;\n            return 0;\n