¿Cuándo comienza el proceso de renderizado de la página?

El proceso de renderizado de la página comienza cuando el navegador recibe y empieza a procesar el documento HTML. Este proceso incluye varias etapas:

1. Análisis del HTML: Se construye el árbol DOM (Modelo de Objetos del Documento).
2. Construcción del CSSOM (Modelo de Objetos CSS): Se analiza el CSS aplicado a la página.
3. Construcción del árbol de renderizado: Se combinan DOM y CSSOM para crear el árbol de renderizado, que contiene los elementos visibles en la página y sus estilos.
4. Layout (Cálculo del diseño): Se determinan las dimensiones y posiciones geométricas de cada elemento en la página.
5. Pintado: Se realiza la pintura de los píxeles de los elementos en la pantalla.
6. Compositing (Composición): Las capas de los elementos renderizados se combinan en la representación final en la pantalla.

Aunque el proceso de renderizado comienza en el lado del cliente (el navegador), su inicio se desencadena al recibir el HTML, que a menudo se genera dinámicamente en el servidor Node.js. El servidor se encarga de preparar y enviar la respuesta HTML inicial.