PerformanceEm Breve

Performance Showcase

Muitas vezes só olhamos para a performance depois que o problema está acontecendo. Isso é bem comum no meio do desenvolvimento de software, no entanto há muita coisa que pode ser evitada se for praticada diariamente e executada do melhor jeito possível. Nessa demo vamos colocar números na frente de cada otimização: cem mil linhas renderizando sem travar via virtualização, code splitting reduzindo o bundle inicial, useMemo/useCallback usados para evitar re-render do conteúdo e uma tarefa pesada rodando em Web Worker sem travar a thread principal. FPS, tempo de carregamento de tela, contagem de renders e tamanho de bundle ficam visíveis o tempo todo.

Performance Virtualização Code Splitting Web Workers Core Web Vitals

Tecnologias

  • TanStack Virtual
  • next/dynamic
  • useMemo/useCallback
  • Web Workers
  • React DevTools Profiler API

Arquitetura

  • Virtualização de listas grandes (windowing)
  • Code splitting por rota
  • Web Workers para tarefas pesadas fora da thread principal
  • Métricas de FPS/render/bundle expostas na UI

Conceitos

  • Virtualização de listas (windowing)
  • Divisão de bundle por rota
  • Processamento fora da thread principal
  • Core Web Vitals (LCP | FID | CLS)

Área de demonstração

A demonstração interativa deste recurso estará disponível em breve.

Em Breve

A demonstração interativa de Performance Showcase está em desenvolvimento. A arquitetura e os detalhes técnicos já estão documentados acima.

Seguir no GitHub
Novas demos são adicionadas regularmente