7 Gargalos Ocultos de Performance em JavaScript

Apps web lentos raramente falham por causa de algoritmos ruins. Eles falham pela forma como seu código se comunica com o navegador.

Eu analisei o perfil de mais de 300 apps em produção. Descobri que 73% dos problemas de performance vêm destas 7 fontes.

  1. Layout thrashing Isso acontece quando você lê uma propriedade de layout e, logo em seguida, escreve no DOM. Isso força o navegador a recalcular o layout várias vezes. • Impacto: renderização 40-60% mais lenta. • Correção: Agrupe todas as suas leituras primeiro. Depois, agrupe todas as suas escritas usando requestAnimationFrame.

  2. Event listeners sem controle Adicionar um listener sem removê-lo causa vazamentos de memória (memory leaks). Este é um grande problema em single-page apps. • Impacto: crescimento de 15-30% na memória por hora. • Correção: Use um AbortController para limpar os listeners quando um componente for desmontado (unmount).

  3. Leituras síncronas do DOM em loops Ler propriedades como offsetWidth dentro de um loop que também escreve no DOM causa reflows constantes. • Impacto: queda de 20-40% nos frames. • Correção: Armazene os valores de layout em uma variável antes de iniciar o loop.

  4. Falta de agrupamento com requestAnimationFrame Alterações diretas no DOM em eventos de scroll ou resize ocorrem com frequência excessiva. • Impacto: 10-25% de jank durante a rolagem. • Correção: Envolva seus handlers de scroll em requestAnimationFrame para sincronizá-los com o ciclo de pintura (paint cycle).

  5. Chamadas grandes de JSON.parse Fazer o parse de arquivos JSON enormes bloqueia a thread principal. Isso causa atraso na entrada (input lag). • Impacto: congelamentos de 50-200ms por chamada. • Correção: Use Web Workers para processar os dados fora da thread principal.

  6. Correspondência de seletores CSS complexos Seletores profundamente aninhados ou complexos tornam o recálculo de estilos mais lento. • Impacto: 5-15% de tempo extra de estilo. • Correção: Simplifique sua estrutura CSS e use seletores mais planos.

  7. Chunks de bundle duplicados Bundles não otimizados desperdiçam largura de banda. • Impacto: 100-500KB de transferência desperdiçada. • Correção: Use ferramentas como webpack-bundle-analyzer para encontrar e remover código duplicado.

Como medir seu progresso: • Abra o Chrome DevTools e vá para a aba Performance. • Grave uma sessão de 5 segundos. • Procure por tarefas longas (long tasks) no flame chart do Main. • Aplique uma correção e compare os tempos de Rendering e Painting.

Foque nessas áreas para melhorar suas pontuações do Core Web Vitals.

Fonte: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5