Performance: reflow, repaint e composite

A diferença entre 60fps e 6fps

O browser tenta renderizar a 60 frames por segundo — um novo frame a cada 16ms. Se uma operação JavaScript ou CSS levar mais que isso, o frame é perdido e o usuário sente "jank" (travamento). A maioria das travagens acontece por reflow desnecessário: mudanças que forçam o browser a recalcular posições e tamanhos de elementos.

Entender quais propriedades CSS e quais operações JS disparam cada fase do pipeline é a diferença entre uma animação fluida e uma que trava. A regra de ouro: use transform e opacity para animações — elas vão direto para a GPU.

Explore o custo de cada propriedade

Clique nas categorias e depois nas propriedades para ver o que cada uma dispara no pipeline de renderização e por quê.

Forced Synchronous Layout

// Forced Synchronous Layout — o pior anti-pattern

// ✗ MAU: leitura depois de escrita em loop = reflow por iteração
const elements = document.querySelectorAll(".card");
for (const el of elements) {
  el.style.width = el.offsetWidth + 10 + "px";  // read → reflow → write, 100x!
}

// ✓ BOM: leia tudo, depois escreva tudo (batch reads/writes)
const widths = Array.from(elements).map(el => el.offsetWidth);  // leitura em batch
elements.forEach((el, i) => el.style.width = widths[i] + 10 + "px");  // escrita em batch

// Melhor ainda: FastDOM (biblioteca) agenda leituras/escritas no frame certo

Ferramentas de diagnóstico

# Ferramentas para medir performance

# 1. Performance API (JavaScript)
performance.now()                          # timestamp de alta resolução (ms)
performance.mark("inicio")
performance.mark("fim")
performance.measure("duracao", "inicio", "fim")

# 2. PerformanceObserver (métricas automáticas)
new PerformanceObserver((list) => {
  list.getEntries().forEach(e => console.log(e.name, e.startTime));
}).observe({ type: "layout-shift", buffered: true });

# 3. DevTools Performance tab
# F12 → Performance → Record → interagir → Stop
# Identifica: Long Tasks (>50ms), Layout, Paint, Script

# 4. Lighthouse (DevTools → Lighthouse)
# Pontuação 0-100 para Performance, Acessibilidade, SEO
# Mostra oportunidades específicas de melhoria

Meça e otimize uma animação

Mini projeto: crie uma animação de 50 divs voando pela tela usando setInterval + left/top. Meça o FPS com performance.now(). Depois reimplemente com requestAnimationFrame + transform e compare.

Projeto principal: grave um perfil de performance no DevTools de uma página com scroll. Identifique a maior Long Task. Reescreva o código responsável para não bloquear o thread principal por mais de 16ms.

Desafio extra: use o Layout Instability API e o Largest Contentful Paint observer para criar um "Performance HUD" — um overlay que mostra LCP, CLS e FPS em tempo real sobre qualquer página, usando apenas um content script de extensão.

Teste sua intuição

Onde você encontra isso