Perfilado de código TypeScript: encontrando cuellos de botella para principiantes

Introducción: por qué el perfilado de TypeScript es importante para el rendimiento

Cuando escribes una aplicación en TypeScript, puede funcionar rápido con datos pequeños, pero a medida que el proyecto crece comienzan a aparecer cuellos de botella — secciones de código que ralentizan la ejecución. El perfilado ayuda a encontrar estos puntos problemáticos y entender dónde se gasta más tiempo.

En este artículo analizaremos cómo perfilar código TypeScript usando las herramientas integradas del navegador y Node.js. Aprenderás cómo encontrar funciones lentas, analizar la pila de llamadas y optimizar secciones críticas.

El artículo está dirigido a desarrolladores principiantes que ya conocen los fundamentos de TypeScript y quieren mejorar el rendimiento de sus aplicaciones.

Conceptos básicos del perfilado

El perfilado es el proceso de recopilar datos sobre cómo se ejecuta un programa: cuánto tiempo toman las funciones, con qué frecuencia se llaman, qué recursos consumen.

En el contexto de TypeScript, es importante entender varias métricas clave:

\n
• Tiempo de ejecución — cuántos milisegundos toma cada función.
\n
• Número de llamadas — con qué frecuencia se llama a una función.
\n
• Memoria — cuánta memoria se asigna y libera.
\n
• Pila de llamadas — la secuencia de llamadas a funciones.
\n

Para perfilar código TypeScript se pueden usar tanto herramientas del navegador (Chrome DevTools) como utilidades de Node.js (por ejemplo, --inspect o clinic.js).

Herramientas para el perfilado de TypeScript

Chrome DevTools para código del lado del cliente

Si tu aplicación TypeScript funciona en el navegador, la mejor herramienta son las Chrome DevTools integradas. Abre la pestaña Performance y presiona el botón de grabación. Realiza una acción en la página, detén la grabación y obtén una línea de tiempo.

Ejemplo de análisis: ves que la función processData toma 300 ms. Esto es una señal para optimizar.

Node.js y el perfilador integrado

Para código TypeScript del lado del servidor (Node.js) usa la bandera --inspect o --prof. Por ejemplo:

node --inspect dist/app.js

Luego abre chrome://inspect en el navegador y conéctate al proceso. Obtendrás las mismas capacidades de DevTools, pero para código del servidor.

clinic.js — una utilidad simple para Node.js

Instala clinic.js globalmente:

npm install -g clinic

Ejecuta el perfilado:

clinic doctor -- node dist/app.js

La utilidad mostrará un informe visual con recomendaciones.

Encontrando cuellos de botella en la práctica

Ejemplo 1: Ordenamiento lento de un array

Supongamos que tienes una función para ordenar un array grande de objetos:

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        // Comparación lenta de cadenas\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}

Al perfilar, notarás que toLowerCase() se llama en cada comparación, y puede haber O(n log n) de ellas. El cuello de botella es la conversión repetida de cadenas.

Optimización: convierte las cadenas previamente:

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