Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint
Descubra qué hace el navegador con los bytes de HTML y CSS: construir el DOM y el CSSOM, calcular el layout y pintar los píxeles.
Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
De bytes a píxeles
Cuando el navegador recibe bytes HTML del servidor, un proceso de varios pasos los convierte en los píxeles que ve en pantalla. Conocer este flujo le ayuda a optimizar el rendimiento y a comprender qué provoca los problemas visuales.
Paso 1 — Analizar HTML: construir el DOM
El analizador de HTML del navegador lee el flujo de bytes y construye el Modelo de objetos del documento (DOM): un árbol de nodos que representa cada elemento HTML, nodo de texto y comentario del documento.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Paso 2 — Analizar CSS: construir el CSSOM
Al mismo tiempo, los bytes de CSS se analizan para crear el Modelo de objetos CSS (CSSOM): un árbol de reglas de estilo. CSS es bloqueante del renderizado: el navegador no pintará píxeles hasta haber calculado los estilos del contenido visible.
Paso 3 — El árbol de renderizado
El navegador combina el DOM y el CSSOM en el árbol de renderizado. Solo se incluyen los nodos visibles; los elementos con display:none quedan excluidos. Cada nodo del árbol de renderizado contiene el estilo calculado con el que se pintará.
Paso 4 — Layout (Reflow)
Layout calcula la posición y el tamaño exactos de cada nodo del árbol de renderizado mediante el modelo de cajas y el ancho de la ventana gráfica. Este proceso también se denomina reflow. El layout es costoso; evite activarlo repetidamente en JavaScript.
Paso 5 — Pintado
El pintado convierte el layout en píxeles reales en pantalla. El navegador dibuja los fondos, los bordes, el texto y las imágenes capa por capa. Algunos elementos crean sus propias capas de composición para obtener un renderizado acelerado por GPU.
Paso 6 — Composición
El compositor del navegador combina las capas pintadas en el fotograma final y lo envía a la pantalla. Utilizar transform y opacity para las animaciones permite que el compositor las ejecute en la GPU, omitiendo por completo el layout y el pintado.
¿Qué bloquea el renderizado?
El CSS situado en <head> bloquea el renderizado. De forma predeterminada, JavaScript bloquea tanto el analizador como el renderizado. Utilice defer en las etiquetas de script para analizar el JS después del HTML sin bloquear el renderizado.
<script src="app.js" defer></script>Ruta crítica de renderizado
La ruta crítica de renderizado es la secuencia que va desde la recepción de los bytes HTML hasta la visualización del primer píxel. Optimizarla significa minimizar el número y el tamaño de los recursos que bloquean el renderizado y posponer el JS y el CSS no críticos.
Reflow frente a Repaint
Cambiar propiedades del layout (width, margin, position) activa un reflow y un repaint. Cambiar propiedades que solo afectan a la apariencia (color, background) activa únicamente un repaint. Cambiar transform/opacity solo activa la composición. Prefiera la operación menos costosa.
DevTools: vea la línea de tiempo de pintura
En Chrome DevTools, abra el panel Performance, registre la carga de una página e inspeccione la cascada. Verá los eventos de Painting en verde y podrá identificar qué elementos provocan layouts costosos.
Comprobación rápida
¿Qué paso calcula el tamaño y la posición exactos de cada elemento de la página?
Resumen: el flujo de renderizado
HTML → DOM → CSSOM → Árbol de renderizado → Layout → Pintado → Composición. Cada paso alimenta al siguiente. Optimizar la ruta crítica de renderizado significa acortar este flujo para que el primer contenido visible aparezca lo más rápido posible.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint» es gratis?
Sí — el texto completo de «Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint»?
Descubra qué hace el navegador con los bytes de HTML y CSS: construir el DOM y el CSSOM, calcular el layout y pintar los píxeles. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- DNS y HTTP en los navegadores: ciclo de vida de una solicitud
- HTML, CSS y JavaScript: función de cada capa
- Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint
- Herramientas para desarrolladores: abrir y usar DevTools