¿Cómo se carga una página web?

El usuario ingresa una URL en la barra de direcciones del navegador o hace clic en un enlace.
Análisis de URL: El navegador analiza la URL para determinar el protocolo, dominio, puerto y ruta.
Búsqueda de dirección IP: El navegador verifica la caché DNS, luego la caché del sistema operativo, luego la caché del enrutador. Si la dirección no se encuentra localmente, se realiza una consulta al servidor DNS para obtener la dirección IP del nombre de dominio.
Establecimiento de la conexión TCP (Handshake): El navegador establece una conexión TCP con el servidor usando la dirección IP obtenida (apretón de manos de tres vías: SYN -> SYN-ACK -> ACK).
Envío de la solicitud HTTP: El navegador envía una solicitud HTTP (generalmente GET) al servidor indicando el recurso requerido (ruta), encabezados (User-Agent, Accept-Encoding, Cookie, etc.) y cuerpo de la solicitud (si lo hay).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Procesamiento de la solicitud por el servidor: El servidor recibe la solicitud, la procesa (por ejemplo, ejecuta scripts en el lado del servidor) y genera una respuesta HTTP.
Envío de la respuesta HTTP: El servidor envía la respuesta HTTP de vuelta al navegador. La respuesta incluye un código de estado (por ejemplo, 200 OK), encabezados (Content-Type, Content-Length, Cache-Control, etc.) y cuerpo de la respuesta (el contenido del recurso solicitado, por ejemplo, un archivo HTML).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
Análisis del HTML y construcción del DOM: El navegador comienza a recibir el código HTML y a analizarlo, creando un modelo de objeto del documento (DOM - Document Object Model) en la memoria. El DOM representa un árbol de elementos HTML.
Carga y procesamiento de recursos: Durante el análisis del HTML, el navegador encuentra enlaces a otros recursos (CSS, JavaScript, imágenes, fuentes, etc.). Para cada recurso, se repiten los pasos 3-7 (búsqueda de IP, conexión TCP (si es necesario), solicitud/respuesta HTTP). La carga de estos recursos puede ocurrir en paralelo (limitado por la cantidad de conexiones simultáneas).
Construcción del CSSOM: El navegador analiza los archivos CSS y los bloques <style> en HTML, creando un modelo de objeto CSS (CSSOM - CSS Object Model). El CSSOM representa los estilos aplicables a los elementos en la página.
Construcción del árbol de renderizado: El navegador combina el DOM y el CSSOM para construir el árbol de renderizado (Render Tree). El árbol de renderizado contiene solo los elementos visibles de la página y sus estilos. Los elementos con display: none no se incluyen.
Layout (Reflow): El navegador calcula la posición y tamaño exactos de cada elemento en el diseño, basándose en el árbol de renderizado, las dimensiones de la ventana de vista y los estilos.
Pintado (Repaint): El navegador dibuja cada elemento en la pantalla en las posiciones calculadas y con los estilos aplicados. Esto ocurre en capas.
Composición: El navegador combina las capas dibujadas en la imagen final que se muestra en la pantalla del usuario.
Ejecución de JavaScript: A medida que se cargan y analizan los scripts, se ejecuta el código JavaScript. La ejecución de JavaScript puede afectar al DOM y al CSSOM, provocando pasos repetidos de Layout y Painting (Relayout/Repaint).

Etapas clave para mostrar contenido:

DOMContentLoaded: El evento se dispara cuando el navegador ha cargado y analizado completamente el documento HTML y ha construido el árbol DOM, pero espera a que se carguen las hojas de estilo, imágenes y submarcos.
Load: El evento se dispara cuando toda la página, incluyendo imágenes, scripts, estilos y otros recursos, se ha cargado completamente.