¿Qué formas de optimización del renderizado (reflujo) conoces?

La optimización del renderizado (recalcular estilos y diseño) se logra minimizando o eliminando operaciones que provocan Layout (reflow o recálculo de posiciones y tamaños de elementos). Estas operaciones incluyen:

• Cambios en propiedades geométricas: width, height, left, top, margin, padding.
• Cambios en contenido: añadir/eliminar nodos, modificar texto.
• Cambios en propiedades que afectan el flujo del documento: display, float, position.
• Obtener estilos calculados o dimensiones: element.offsetWidth, getComputedStyle().
• Cambios en el tamaño de la ventana del navegador.

Formas de optimización:

1. Evitar Layouts síncronos forzados: Obtener información de Style/Layout antes de realizar cambios que puedan provocar Layout, y luego hacer todos los cambios en paquetes.
2. Usar transform y opacity: Estas propiedades modifican el elemento sin afectar la geometría de otros elementos, provocando solo Composición (Composite) y Pintado (Paint), pero no Layout.
3. Aplicar will-change: El atributo informa al navegador sobre cambios previstos en un elemento, permitiendo optimizar el renderizado con anticipación (por ejemplo, mover el elemento a una capa GPU separada). Se debe usar con moderación, ya que puede aumentar el consumo de memoria.
4. Virtualización de listas: Renderizar solo los elementos visibles en ese momento, reduciendo significativamente la cantidad de elementos en el DOM.
5. Eliminar elemento del flujo: Para animaciones complejas que requieren cambios frecuentes en propiedades geométricas, se puede eliminar temporalmente el elemento del flujo normal del documento (por ejemplo, con position: absolute o fixed), realizar la animación y luego devolverlo.
6. Debouncing y throttling de eventos: Limitar la frecuencia de llamadas a manejadores de eventos (como desplazamiento o cambio de tamaño de ventana), que pueden provocar Layout.

// Ejemplo de Layout forzado síncrono
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Provoca Layout
element.style.height = (height + 10) + 'px'; // Provoca Layout nuevamente

// Ejemplo optimizado (cambio en paquete)
const element = document.getElementById('myElement');
// Obtener valor antes de cambios
const height = element.offsetHeight; 
// Realizar todos los cambios de una vez
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Usar transform en lugar de left/top para animaciones */
.animated-element {
  transform: translateX(100px); /* Provoca Composición */
  /* En lugar de left: 100px; que provoca Layout y Pintado */
}

/* Uso de will-change */
.will-animate {
  will-change: transform, opacity; 
}