Que métodos de otimização de renderização (reflow) conhece?

A otimização do rendering (recalcular estilos e layout) é alcançada minimizando ou eliminando operações que causam Layout (reflow ou recálculo de posições e tamanhos de elementos). Essas operações incluem:

• Alterações nas propriedades geométricas: width, height, left, top, margin, padding.
• Alterações de conteúdo: adicionar/remover nós, modificar texto.
• Alterações em propriedades que afetam o fluxo do documento: display, float, position.
• Obter estilos calculados ou dimensões: element.offsetWidth, getComputedStyle().
• Alterações no tamanho da janela do navegador.

Formas de otimização:

1. Evitar Layouts síncronos forçados: Obter informações de Style/Layout antes de fazer alterações que possam provocar Layout, e depois fazer todas as alterações em pacote.
2. Usar transform e opacity: Essas propriedades modificam o elemento sem afetar a geometria de outros elementos, provocando apenas Composição (Composite) e Pintura (Paint), mas não Layout.
3. Aplicar will-change: O atributo informa ao navegador sobre mudanças previstas em um elemento, permitindo otimizar o renderizado antecipadamente (por exemplo, mover o elemento para uma camada GPU separada). Deve ser usado com moderação, pois pode aumentar o consumo de memória.
4. Virtualização de listas: Renderizar apenas os elementos visíveis no momento, reduzindo significativamente o número de elementos no DOM.
5. Remover elemento do fluxo: Para animações complexas que requerem mudanças frequentes em propriedades geométricas, pode-se remover temporariamente o elemento do fluxo normal do documento (por exemplo, com position: absolute ou fixed), realizar a animação e depois devolvê-lo.
6. Debouncing e throttling de eventos: Limitar a frequência de chamadas aos manipuladores de eventos (como scroll ou resize), que podem provocar Layout.

// Exemplo de Layout forçado síncrono
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Provoca Layout
element.style.height = (height + 10) + 'px'; // Provoca Layout novamente

// Exemplo otimizado (alteração em pacote)
const element = document.getElementById('myElement');
// Obter valor antes das alterações
const height = element.offsetHeight; 
// Fazer todas as alterações de uma vez
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Usar transform em vez de left/top para animação */
.animated-element {
  transform: translateX(100px); /* Provoca Composição */
  /* Em vez de left: 100px; que provoca Layout e Pintura */
}

/* Aplicação de will-change */
.will-animate {
  will-change: transform, opacity; 
}