Lección 9 de 1512 min
Cómo el navegador pinta una página
La ruta crítica de renderizado, cómo cargar scripts sin bloquear y cuánto cuesta cada cambio de CSS.
El navegador ya tiene el HTML. ¿Cómo se convierte ese texto en píxeles? A la serie de pasos necesarios para mostrar la página por primera vez se le llama ruta crítica de renderizado. Entenderla es la clave para hacer webs rápidas.
De bytes a píxeles
HTML → DOM
El HTML se analiza y se convierte en el árbol de nodos del documento.
CSS → CSSOM
Las hojas de estilo se analizan y forman el modelo de objetos de CSS.
1
Árbol de renderizado
Combina DOM y CSSOM. Solo incluye lo visible: un elemento con display: none no entra.
2
Layout
Calcula la geometría: dónde va cada caja y cuánto mide, según el tamaño de la ventana.
3
Paint
Convierte cada caja en píxeles: texto, colores, bordes, imágenes, sombras.
4
Composición
Junta las capas pintadas en el orden correcto y las envía a la pantalla.
- El navegador analiza el HTML y construye el DOM. Al mismo tiempo, descarga y analiza el CSS para construir el CSSOM.
- Combina ambos en el árbol de renderizado: solo lo que se va a ver, con sus estilos finales ya calculados.
- En el layout (también llamado reflow) calcula la posición y el tamaño exactos de cada caja.
- En el paint rellena los píxeles de cada caja, a menudo en varias capas.
- En la composición junta las capas en el orden correcto y las muestra en pantalla.
Lo que bloquea: CSS y JavaScript
Hay recursos que detienen el proceso. El CSS bloquea el renderizado: el navegador no pinta nada hasta tener todos los estilos, porque si no verías la página sin formato durante un instante.
Un <script> clásico es aún más drástico: bloquea el análisis del HTML. Como el script podría modificar el documento mientras se lee, el navegador se detiene, lo descarga, lo ejecuta y solo entonces sigue. Los atributos async y defer existen para evitarlo.
Interactivo
¿Cuándo se ejecuta mi script?
Compara las cuatro formas de cargar un script y fíjate en cuándo termina de analizarse la página.
<script src="app.js"></script>
- Análisis del HTML
- Análisis detenido
- Descarga
- Ejecución
Al encontrar el script, el navegador detiene el análisis del HTML, lo descarga, lo ejecuta y solo entonces sigue. Mientras tanto, el resto de la página espera.
Úsalo para: Casi nunca en el <head>. Es el comportamiento heredado: el script podría modificar el documento mientras se lee.
El HTML termina de analizarse en el instante 100 de 100.
Pruébalo
Regla práctica: pon tus scripts en el <head> con defer (o usa type="module", que se comporta igual) y reserva async para los scripts de terceros independientes, como la analítica.
No todos los cambios cuestan lo mismo
Una vez pintada, la página no está quieta: pasas el ratón por encima de un botón, se abre un menú, una animación se mueve. Cada cambio obliga al navegador a repetir parte del proceso, y según la propiedad que cambie se repetirán más o menos fases.
Interactivo
¿Cuánto cuesta este cambio?
Elige una propiedad CSS y mira qué fases del navegador tiene que repetir cuando cambia.
1se repite
Estilo
Recalcula qué reglas CSS afectan a cada elemento.
2se repite
Layout
Calcula tamaño y posición de cada caja.
3se repite
Paint
Rellena los píxeles: texto, colores, bordes, sombras.
4se repite
Composición
Combina las capas en el orden correcto y las muestra.
Coste: Alto
Cambiar el tamaño obliga a recalcular la geometría del elemento y, a menudo, la de sus vecinos. Es lo más caro.
Simplificación: el coste real depende del navegador y del contexto (por ejemplo, de si el elemento ya tiene una capa propia).
Si una animación cambia width o top, el navegador tiene que recalcular el layout en cada fotograma, unas 60 veces por segundo. Con transform y opacity puede saltarse casi todo el trabajo. Por eso son las propiedades recomendadas para animar.
Pruébalo
En las herramientas de desarrollo, la pestaña Rendimiento (Performance) graba todo lo que hace el navegador. Verás bloques de «Recalculate Style», «Layout», «Paint» y «Composite Layers»: exactamente las fases de esta lección.
Comprueba lo aprendido
Cuestionario
Responde las 5 preguntas para completar la lección.
1.¿Cuál es el orden correcto de la ruta crítica de renderizado?
2.Un elemento tiene
display: none. ¿Está en el árbol de renderizado?3.Vas a añadir un script de analítica que no depende de nada y del que no depende nadie. Quieres que se ejecute cuanto antes, sin bloquear la página. ¿Qué atributo usas?
4.Quieres animar un elemento de forma fluida. ¿Qué propiedad suele ser más barata?
5.¿Por qué el CSS bloquea el renderizado?