01Qué es

Cuando abres una página, el navegador no guarda una fotografía: guarda una lista de piezas. Cada botón, cada texto, cada imagen es una pieza con su posición y su estilo. Esa lista se llama DOM, y es la única cosa que el navegador sabe dibujar.

Y aquí está el detalle que lo explica casi todo: el navegador trabaja con un solo par de manos. Colocar las piezas, pintarlas, ejecutar tu JavaScript y responder a tus clics pasan por el mismo sitio, que se llama hilo principal. No hay dos pasillos: hay uno.

La analogía útil es una cocina con un solo cocinero. Puede cortar, cocinar o atender al cliente, pero no las tres cosas a la vez. Si está cortando cebolla durante dos minutos, el cliente que levantó la mano espera dos minutos — aunque el plato esté casi listo.

02Por qué sucede

Para convertir tu código en píxeles, el navegador hace siempre los mismos cinco pasos:

1. DOM: lee el HTML y construye el árbol de piezas.
2. CSSOM: lee los estilos y construye el árbol de reglas.
3. Árbol de render: cruza los dos anteriores; decide qué se dibuja y con qué estilo.
4. Layout: calcula dónde va cada pieza y cuánto mide. Aquí es donde "mover una silla obliga a rodear la mesa entera".
5. Paint y composición: rellena los píxeles.

Los pasos 3, 4 y 5 se repiten cada vez que algo cambia. Y aquí aparece la primera regla incómoda: cambiar el tamaño o la posición de una pieza puede obligar a recalcular todas las demás. Por eso una lista de 5.000 filas no es "5.000 veces una fila": es un cálculo que las incluye a todas.

La segunda regla es el presupuesto de fotograma. Para que una animación se vea fluida, el navegador tiene unos 16,7 milisegundos por fotograma (60 por segundo). Todo lo que hagas —tu JavaScript, el layout, el paint— tiene que caber ahí. Si una sola tarea ocupa 120 ms, el navegador se salta siete fotogramas seguidos: eso es el tirón.

03Cómo se ataca

Con la cadena en la cabeza, solo existen cuatro formas de intervenir:

// MAL: alterna lectura y escritura → 100 recálculos de layout
for (const fila of filas) {
  const alto = fila.offsetHeight;   // leer fuerza layout
  fila.style.height = alto + 1 + 'px'; // escribir lo invalida
}

// BIEN: primero leo todo, después escribo todo → un solo recálculo
const altos = filas.map((fila) => fila.offsetHeight);
filas.forEach((fila, i) => {
  fila.style.height = altos[i] + 1 + 'px';
});

04Cómo diagnosticarlo

La regla de oro: no mires, graba. El panel de Performance graba lo que pasó y te deja ver el orden real de las cosas, cosa que la intuición siempre equivoca.

Herramienta	Qué se mira	Cómo se ve el síntoma
Performance › grabar una interacción	Long Tasks	Barras rojas de más de 50 ms con un nombre de función dentro
Performance › Main	Quién ocupa el hilo	Un bloque amarillo enorme de JavaScript donde debía haber muchos pequeños
Performance › Rendering	Layout y paint repetidos	Barras moradas y verdes encadenadas; "Recalculate Style" muchas veces por segundo
Performance › CPU 4x slowdown	El mismo caso en una máquina lenta	Un tirón que en tu equipo no se ve aparece con claridad