¿Debes pintar 500 filas en tabla. Qué técnica reduce reflows?

Agrupar escrituras minimiza trabajo del motor de render.

DOM performance: evita reflows y trabajo innecesario

Aprende a reducir coste de renderizado agrupando cambios y minimizando lecturas/escrituras conflictivas del layout.

📘 Teoría

Qué es el layout thrashing

Leer medidas y escribir estilos en cada iteración dispara coste.

Cuando consultas `offsetHeight/getBoundingClientRect` y justo después cambias estilos repetidamente, el navegador recalcula layout muchas veces.

Ese patrón degrada rendimiento sobre todo en listas largas o animaciones.

Batch updates: agrupar lecturas y escrituras

Primero mide, luego aplica cambios.

Evita `innerHTML +=` dentro de bucles.
Si creas muchos nodos, usa `DocumentFragment`.
Usa clases CSS en lote en lugar de estilos inline por nodo.

Fragmentos y requestAnimationFrame

Dos herramientas simples para UIs más fluidas.

`DocumentFragment` permite montar estructura en memoria y hacer un solo append al DOM.

`requestAnimationFrame` coordina cambios visuales con el ciclo de pintado del navegador.

Reutilizar nodos cuando cambia el layout

No siempre hace falta destruir y reconstruir toda la interfaz.

En interfaces que responden al tamaño de pantalla, una estrategia eficiente consiste en mantener un pool de nodos y añadir o quitar solo los estrictamente necesarios.

Este patrón evita trabajo repetido, reduce presión sobre el GC y hace que un `resize` continuo sea más estable que una reconstrucción completa en cada tick.

Precrea o reutiliza nodos si la estructura cambia mucho pero el tipo de elemento es siempre el mismo.
Usa `requestAnimationFrame` para reagrupar renders disparados por `resize`.
Actualiza estilos de layout en lote después de decidir cuántos nodos deben mostrarse.

1 Qué es el layout thrashing 2 Batch updates: agrupar lecturas y escrituras 3 Fragmentos y requestAnimationFrame 4 Reutilizar nodos cuando cambia el layout

🧪 Aprende probando

Ejemplo Ejemplo guiado: render masivo eficiente Genera lista grande con fragment para reducir repaints.

⌄

Ejemplo Demo interactiva: grid que reutiliza nodos al redimensionar Observa cómo una galería ajusta columnas y filas reutilizando celdas existentes y limitando el trabajo en cada `resize`.

⌄

Ejemplo Demo interactiva: layout exacto con requestAnimationFrame Explora un grid cerrado de 50 celdas que recalcula su reparto óptimo con `requestAnimationFrame` y una sola actualización coordinada por frame.

⌄