Perfilando código TypeScript: encontrando gargalos para iniciantes

Introdução: por que a perfilhamento TypeScript é importante para o desempenho

Quando você escreve um aplicativo em TypeScript, ele pode funcionar rapidamente com dados pequenos, mas com o crescimento do projeto começam a aparecer gargalos — trechos de código que retardam a execução. A perfilhamento ajuda a encontrar esses pontos problemáticos e entender onde o tempo está sendo gasto.

Neste artigo, vamos analisar como perfilhar código TypeScript usando ferramentas integradas do navegador e Node.js. Você aprenderá a encontrar funções lentas, analisar a pilha de chamadas e otimizar trechos críticos.

O artigo é voltado para desenvolvedores iniciantes que já conhecem os fundamentos do TypeScript e desejam melhorar o desempenho de seus aplicativos.

Conceitos básicos de perfilhamento

Perfilhamento é o processo de coleta de dados sobre como um programa é executado: quanto tempo as funções levam, com que frequência são chamadas, quais recursos são consumidos.

No contexto do TypeScript, é importante entender algumas métricas-chave:

\n
• Tempo de execução — quantos milissegundos cada função leva.
\n
• Número de chamadas — com que frequência uma função é chamada.
\n
• Memória — quanta memória é alocada e liberada.
\n
• Pilha de chamadas — a sequência de chamadas de funções.
\n

Para perfilhar código TypeScript, você pode usar tanto ferramentas do navegador (Chrome DevTools) quanto utilitários Node.js (por exemplo, --inspect ou clinic.js).

Ferramentas para perfilhamento TypeScript

Chrome DevTools para código do lado do cliente

Se seu aplicativo TypeScript funciona no navegador, a melhor ferramenta são os Chrome DevTools integrados. Abra a aba Performance e clique no botão de gravação. Execute uma ação na página, pare a gravação e obtenha a linha do tempo.

Exemplo de análise: você vê que a função processData leva 300 ms. Isso é um sinal para otimização.

Node.js e o perfilhador integrado

Para código TypeScript do lado do servidor (Node.js), use a flag --inspect ou --prof. Por exemplo:

node --inspect dist/app.js

Em seguida, abra chrome://inspect no navegador e conecte-se ao processo. Você terá os mesmos recursos do DevTools, mas para código do servidor.

clinic.js — utilitário simples para Node.js

Instale o clinic.js globalmente:

npm install -g clinic

Inicie o perfilhamento:

clinic doctor -- node dist/app.js

O utilitário mostrará um relatório visual com recomendações.

Encontrando gargalos na prática

Exemplo 1: Ordenação lenta de array

Suponha que você tenha uma função de ordenação de um grande array 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        // Comparação lenta de strings\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}

Ao perfilhar, você notará que toLowerCase() é chamado para cada comparação, e pode haver O(n log n) delas. O gargalo é a conversão repetida de strings.

Otimização: converta as strings 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