Entendiendo el navegador web: una introducción a las tecnologías y procesos detrás de la navegación

Cuando escribes una dirección y pulsas Enter, en cuestión de segundos aparece una página completa en pantalla. Detrás de esa experiencia tan simple hay una cadena de procesos que vale la pena entender, sobre todo si trabajas construyendo lo que se muestra ahí.

De la URL a la petición

El navegador primero resuelve el dominio a una dirección IP mediante DNS, y luego abre una conexión con el servidor (normalmente sobre HTTPS). El servidor responde con HTML, que es el punto de partida de todo lo que vendrá después.

Construyendo el DOM

El navegador parsea el HTML y construye el DOM (Document Object Model), una representación en árbol de la página. En paralelo, procesa las hojas de estilo (CSS) y construye el CSSOM. Ambos árboles se combinan para formar el render tree, que determina qué se pinta y cómo.

Ejecutando JavaScript

Cuando el navegador encuentra una etiqueta <script>, puede pausar el parseo del HTML para descargar y ejecutar el código, a menos que se use defer o async:

<script src="/app.js" defer></script>

defer permite que el HTML siga parseándose mientras el script se descarga, y lo ejecuta solo cuando el DOM está listo. Es la opción recomendada para la mayoría de scripts de aplicación.

Pintado y composición

Con el render tree listo, el navegador calcula el layout (dónde va cada elemento) y finalmente pinta los píxeles en pantalla. Cambios posteriores —animaciones, scroll, interacciones— pueden disparar recálculos parciales de este proceso, que es donde suele aparecer el famoso "jank" cuando una página se siente lenta.

Por qué importa para quien construye software

Saber que el navegador procesa HTML, CSS y JS en fases distintas explica por qué el orden de carga de recursos afecta directamente el rendimiento percibido, y por qué técnicas como el lazy loading o el code splitting tienen un impacto real en la experiencia del usuario.