01Qué es: el DOM como lista de piezas

El DOM (Document Object Model, el modelo de objetos del documento) es la lista de piezas que el navegador tiene montadas para tu página. Cada etiqueta se vuelve un nodo: un objeto con su texto, sus clases y una caja con posición y tamaño. Montar un nodo es crearlo, insertarlo en el árbol y darle geometría. El navegador no guarda una foto de lo que se ve: guarda el árbol completo, esté en pantalla o no.

Una tabla de 5.000 filas con 8 celdas no son 5.000 piezas: son 5.000 filas, 40.000 celdas y lo que viva dentro, del orden de 50.000 nodos. Esa es la escala real: en la maqueta son 5.000 filas; en el navegador, 50.000 objetos que alguien mantiene.

02Por qué sucede: el costo está en tenerlas puestas

El scroll es barato porque no cambia nada: desplaza una capa que ya estaba pintada. Por eso una lista enorme puede scrollearse con fluidez y aun así sentirse rota.

El problema aparece cuando algo cambia. Filtras, ordenas o marcas una fila: el navegador invalida estilo y geometría y recalcula nodo por nodo. Con 50.000 nodos montados eso son cientos de milisegundos, y mientras corre, el hilo principal (el único lugar donde el navegador atiende clics y pintado) no hace otra cosa. La página no está lenta: está ocupada.

03Cómo se ataca: la ventana del tren

Piensa en la ventana de un tren: el marco está fijo y el paisaje se desliza por delante. No llevas el paisaje contigo y, al pasar la estación, lo que viste ya no está en tu ventana.

Virtualizar es eso, con tres piezas. Un lienzo alto falso: un contenedor de 5.000 × 36 = 180.000 px para que la barra de scroll represente la lista entera. Montar solo la ventana: con la posición del scroll, una división y una multiplicación dicen qué filas deberían verse (unas 40) y solo esas se crean. Y mover con transform: translateY(i × 36px) desplaza sin recalcular el layout, a diferencia de cambiar top o la altura.

El overscan son los platos preparados: sacas dos o tres de más para que el siguiente cliente no espere. Montas unas filas extra arriba y abajo para que un scroll veloz no muestre huecos blancos. Si te pasas, llenas la mesa sin necesidad.

¿Por qué filas y no celdas? La fila tiene una sola altura y una sola posición: la cuenta es una multiplicación. Con celdas hay una posición por celda, el ancho de cada columna depende de las demás y la rejilla se calcula entera. Bajas nodos y multiplicas contabilidad.

El precio es un contrato: altura fija. Con filas de dos líneas hay que medirlas, guardar sus alturas y estimar las que no se vieron; la barra se vuelve aproximada y salta al arrastrarla. Casi siempre conviene recortar el texto a una línea.

// Ventana mínima: lienzo que miente y filas movidas con transform
const ALTO = 36;          // el contrato: todas las filas miden igual
const OVERSCAN = 6;       // platos de más, arriba y abajo
const visibles = Math.ceil(viewport.clientHeight / ALTO);

function pintar(filas, scrollTop) {
  // 1. el scroll cree que hay 5.000 filas
  lienzo.style.height = filas.length * ALTO + 'px';

  const desde = Math.max(0, Math.floor(scrollTop / ALTO) - OVERSCAN);
  const extra = OVERSCAN * 2;
  const hasta = Math.min(filas.length, desde + visibles + extra);

  capa.replaceChildren();   // 2. se desmonta lo que salió
  for (let i = desde; i < hasta; i += 1) {
    const fila = document.createElement('div');
    fila.className = 'fila';
    // 3. mover no obliga a recalcular el layout
    fila.style.transform = `translateY(${i * ALTO}px)`;
    fila.textContent = filas[i].nombre;
    capa.append(fila);
  }
}

// .fila { position: absolute; left: 0; right: 0; height: 36px }

04Cómo diagnosticarlo

El diagnóstico cabe en una pregunta: ¿cuántos nodos hay montados cuando la página se siente lenta?

Herramienta	Qué se mira	Cómo se ve el síntoma
Elements › árbol del DOM	Cuántos nodos cuelgan de la lista: $0.children.length en la consola.	5.000 tr y decenas de miles de nodos. Abrir el árbol tarda segundos.
Performance › pista Main	Las tareas largas, con un triángulo rojo en la esquina de la barra.	Una tarea de 300-800 ms al filtrar, en lugar de muchas pequeñas.
Performance › Recalculate Style y Layout	El ancho de las barras moradas dentro de esa tarea.	Recalculate Style de cientos de ms y un Layout casi igual: se recalcula lo que no se ve.
Memory › heap snapshot	Nodos retenidos y memoria, con dos capturas y una acción en medio.	Decenas de MB en objetos del DOM; si sube tras cada filtro, además hay fuga.