fixing-motion-performance

Quando Usar

Use esta habilidade quando precisar auditar e corrigir problemas de performance de animação, incluindo "layout thrashing", propriedades do compositor, movimento ligado à rolagem e efeitos de desfoque. Use quando animações travam, transições engasgam ou ao revisar a performance de animações CSS/JS.

Corrija problemas de performance de animação.

Como Usar

• /fixing-motion-performance Aplique estas restrições a qualquer trabalho de animação de UI nesta conversa.

• /fixing-motion-performance <file> Revise o arquivo contra todas as regras abaixo e reporte:

  • violações (cite a linha ou trecho exato)
  • por que importa (uma frase curta)
  • uma correção concreta (sugestão em nível de código)

Não migre bibliotecas de animação a menos que explicitamente solicitado. Aplique as regras dentro da pilha existente.

Quando Aplicar

Consulte estas diretrizes ao:

• adicionar ou alterar animações de UI (CSS, WAAPI, Motion, rAF, GSAP)
• refatorar interações ou transições engasgadas
• implementar movimento ligado à rolagem ou revelar ao rolar
• animar layout, filtros, máscaras, gradientes ou variáveis CSS
• revisar componentes que usam will-change, transforms ou medições

Glossário de Passos de Renderização

• compor: transformar, opacidade
• pintar: cor, bordas, gradientes, máscaras, imagens, filtros
• layout: tamanho, posição, fluxo, grid, flex

Categorias de Regras por Prioridade

Referência Rápida

1. Padrões Proibidos (crítico)

• não intercale leituras e escritas de layout no mesmo frame
• não anime layout continuamente em superfícies grandes ou significativas
• não controle a animação a partir de scrollTop, scrollY ou eventos de rolagem
• sem loops requestAnimationFrame sem condição de parada
• não misture múltiplos sistemas de animação que medem ou modificam layout

2. Escolha o Mecanismo (crítico)

• use transform e opacity como padrão para movimento
• use animação controlada por JS apenas quando a interação exigir
• animação de pintura ou layout é aceitável apenas em superfícies pequenas e isoladas
• efeitos de uso único são aceitáveis com mais frequência do que movimento contínuo
• prefira degradar a técnica em vez de remover o movimento completamente

3. Medição (alto)

• meça uma vez, depois anime via transform ou opacity
• agrupe todas as leituras do DOM antes das escritas
• não leia o layout repetidamente durante uma animação
• prefira transições no estilo FLIP para efeitos semelhantes a layout
• prefira abordagens que agrupam medição e escritas

4. Rolagem (alto)

• prefira Scroll ou View Timelines para movimento ligado à rolagem quando disponíveis
• use IntersectionObserver para visibilidade e pausa
• não consulte a posição de rolagem para animação
• pause ou pare animações quando fora da tela
• movimento ligado à rolagem não deve acionar layout ou pintura contínuos em superfícies grandes

5. Pintura (médio-alto)

• animação que aciona pintura é permitida apenas em elementos pequenos e isolados
• não anime propriedades pesadas de pintura em contêineres grandes
• não anime variáveis CSS para transform, opacity ou posição
• não anime variáveis CSS herdadas
• escopo de variáveis CSS animadas localmente e evite herança

6. Camadas (médio)

• movimento do compositor requer promoção de camada, nunca assuma isso
• use will-change temporariamente e cirurgicamente
• evite muitas ou grandes camadas promovidas
• valide o comportamento da camada com ferramentas quando a performance for importante

7. Desfoque e Filtros (médio)

• mantenha a animação de desfoque pequena (<=8px)
• use desfoque apenas para efeitos curtos e de uso único
• nunca anime desfoque continuamente
• nunca anime desfoque em superfícies grandes
• prefira opacity e translate antes do desfoque

8. Transições de Visualização (baixo)

• use transições de visualização apenas para mudanças em nível de navegação
• evite transições de visualização para UI com muitas interações
• evite transições de visualização quando interrupção ou cancelamento forem necessários
• trate mudanças de tamanho como potencialmente acionadoras de layout

9. Limites de Ferramentas (crítico)

• não migre ou reescreva bibliotecas de animação a menos que explicitamente solicitado
• aplique estas regras dentro do sistema de animação existente
• nunca migre APIs parcialmente ou misture estilos dentro do mesmo componente

Correções Comuns

/* layout thrashing: anime transform em vez de width */
/* antes */ .panel { transition: width 0.3s; }

…