Squad Front

Appearance

Performance Avançada no Front-End ​

Este guia detalha estratégias para lidar com gargalos de performance em aplicações de larga escala, indo além do básico.

1. Virtualização de Listas ​

Renderizar milhares de elementos no DOM causa lentidão. A virtualização renderiza apenas os itens visíveis na tela ( viewport).

  • Como funciona: Calcula-se a posição dos itens e renderiza apenas os que estão dentro da área visível + um pequeno buffer.
  • Ferramentas: react-window, react-virtualized.
  • Quando usar: Listas de logs, grandes tabelas de dados ou feeds infinitos.

2. Web Workers ​

O JavaScript é single-threaded. Processamentos pesados travam a interface (Main Thread).

  • Uso: Mover cálculos matemáticos, parsing de grandes JSONs ou manipulação de imagens para um Worker.
  • Vantagem: A UI permanece fluida enquanto o cálculo ocorre em segundo plano.

3. Bundle Analysis e Code Splitting ​

Um bundle gigante aumenta o TBT (Total Blocking Time).

  • Dynamic Imports: Use React.lazy e Suspense para carregar módulos apenas quando necessário (ex: uma rota específica ou um modal pesado).
  • Análise: Use source-map-explorer ou plugins do Vite/Webpack para identificar bibliotecas "vilonas" (que ocupam muito espaço).

4. Gerenciamento de Memória ​

Evite memory leaks para que a aplicação não fique lenta com o passar do tempo.

  • Pitfalls:
    • Esquecer de limpar setInterval ou addEventListener.
    • Manter referências a grandes objetos em variáveis globais.
    • Closures que capturam grandes escopos desnecessariamente.

5. Estratégias de Cache Avançadas ​

Além do cache do navegador, usamos:

  • Service Workers: Para offline-first e carregamento instantâneo de assets.
  • TanStack Query Cache: Para evitar requisições repetitivas ao servidor.
  • State Normalization: Reduz a redundância de dados na memória.

6. Referências ​