¿Cómo procesa el navegador la página web?

Análisis de URL: El navegador analiza la URL para determinar el protocolo, el nombre de dominio y la ruta al recurso.
Solicitud DNS: Si el nombre de dominio aún no está en la caché local, el navegador envía una solicitud DNS para obtener la dirección IP del servidor.
Establecimiento de conexión TCP: El navegador establece una conexión TCP con el servidor usando la dirección IP obtenida.
Solicitud HTTP: El navegador envía una solicitud HTTP al servidor, solicitando la página web deseada.
Recepción de la respuesta HTTP: El servidor procesa la solicitud y envía una respuesta HTTP que contiene el código HTML, CSS, JavaScript y otros recursos.
Análisis de HTML: El navegador comienza a analizar el HTML recibido, creando un árbol DOM (Document Object Model).
Carga de recursos: Durante el análisis del HTML, el navegador detecta enlaces a otros recursos (CSS, JS, imágenes) y comienza a cargarlos, a menudo en paralelo.
Análisis de CSS: El navegador analiza el CSS, creando un árbol CSSOM (CSS Object Model).
Construcción del árbol de renderizado (Render Tree): Combinando DOM y CSSOM, el navegador crea un árbol de renderizado que contiene solo los nodos visibles y sus estilos.
Maquetación (Layout): El navegador calcula las dimensiones geométricas y la posición de cada elemento en la página.
Pintado (Painting): El navegador dibuja píxeles para cada elemento en la pantalla, basándose en el árbol de renderizado y los resultados de la maquetación.
Composición (Compositing): Si la página contiene capas (por ejemplo, debido a propiedades CSS como transform o opacity), el navegador combina estas capas para mostrar la imagen final.
Procesamiento de JavaScript: Al detectar etiquetas <script> o scripts en línea, el navegador analiza, compila y ejecuta JavaScript. JavaScript puede modificar el DOM, CSSOM y afectar las etapas de maquetación y pintado, lo que puede provocar la repetición de estos pasos.