Profiling TypeScript Code: Finding Bottlenecks for Beginners

Introduction: Why Profiling TypeScript is Important for Performance

When you write an application in TypeScript, it may run quickly on small data, but as the project grows, bottlenecks — code sections that slow down execution — begin to appear. Profiling helps find these problem areas and understand where the most time is spent.

In this article, we will break down how to profile TypeScript code using built-in browser and Node.js tools. You will learn how to find slow functions, analyze the call stack, and optimize critical sections.

This article is intended for beginner developers who are already familiar with the basics of TypeScript and want to improve the performance of their applications.

Basic Concepts of Profiling

Profiling is the process of collecting data about how a program executes: how long functions take, how often they are called, what resources are consumed.

In the context of TypeScript, it is important to understand several key metrics:

\n
• Execution time — how many milliseconds each function takes.
\n
• Number of calls — how often a function is called.
\n
• Memory — how much memory is allocated and freed.
\n
• Call stack — the sequence of function calls.
\n

For profiling TypeScript code, you can use both browser tools (Chrome DevTools) and Node.js utilities (e.g., --inspect or clinic.js).

Tools for Profiling TypeScript

Chrome DevTools for Client-Side Code

If your TypeScript application runs in the browser, the best tool is the built-in Chrome DevTools. Open the Performance tab and press the record button. Perform an action on the page, stop the recording, and get a timeline.

Example analysis: you see that the processData function takes 300 ms. This is a signal for optimization.

Node.js and the Built-in Profiler

For server-side TypeScript code (Node.js), use the --inspect or --prof flag. For example:

node --inspect dist/app.js

Then open chrome://inspect in the browser and connect to the process. You will get the same DevTools capabilities, but for server-side code.

clinic.js — A Simple Utility for Node.js

Install clinic.js globally:

npm install -g clinic

Run profiling:

clinic doctor -- node dist/app.js

The utility will show a visual report with recommendations.

Finding Bottlenecks in Practice

Example 1: Slow Array Sorting

Suppose you have a function for sorting a large array of objects:

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        // Slow string comparison\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}

When profiling, you will notice that toLowerCase() is called for each comparison, and there can be O(n log n) of them. The bottleneck is repeated string conversion.

Optimization: pre-convert the strings:

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