DNS y HTTP en los navegadores: ciclo de vida de una solicitud
Siga una URL desde la barra de direcciones, pasando por la resolución DNS, la conexión TCP y la solicitud HTTP, hasta la respuesta del servidor al navegador.
DNS y HTTP en los navegadores: ciclo de vida de una solicitud es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué ocurre cuando escribe una URL?
Cada vez que visita un sitio web, su navegador inicia una secuencia precisa de pasos. Comprender esta secuencia le convierte en un mejor desarrollador: sabrá dónde pueden surgir problemas y cómo acelerar el proceso.
Paso 1 — Resolución de DNS
DNS (Sistema de nombres de dominio) es la guía telefónica de internet. Su navegador consulta un resolvedor DNS: «¿Qué dirección IP corresponde a example.com?». El resolvedor comprueba las cachés y, si es necesario, consulta los servidores de nombres autoritativos.
# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NSPaso 2 — Handshake de TCP
Una vez conocida la IP, el navegador abre una conexión TCP mediante el handshake de tres vías: SYN → SYN-ACK → ACK. En HTTPS, a continuación se realiza un handshake de TLS que negocia el cifrado.
Paso 3 — La solicitud HTTP
El navegador envía una solicitud HTTP a través de la conexión TCP. Incluye un método (GET, POST…), la ruta (/index.html), la versión de HTTP y encabezados como Host y Accept.
GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0Paso 4 — La respuesta HTTP
El servidor procesa la solicitud y devuelve una respuesta: un código de estado (200 OK, 404 Not Found…), encabezados de respuesta (Content-Type, Cache-Control) y el cuerpo (HTML, JSON, bytes de imagen).
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
<!DOCTYPE html>...HTTP/1.1 frente a HTTP/2 frente a HTTP/3
HTTP/1.1 envía una solicitud por conexión. HTTP/2 multiplexa muchas solicitudes en una sola conexión. HTTP/3 utiliza QUIC (basado en UDP) para reducir la latencia, especialmente en redes móviles con pérdidas.
Códigos de estado que debe conocer
2xx = éxito (200 OK, 201 Created). 3xx = redirección (301 Moved Permanently, 304 Not Modified). 4xx = error del cliente (400, 401, 403, 404). 5xx = error del servidor (500, 502, 503).
HTTPS y TLS
HTTPS encapsula HTTP dentro de TLS (Seguridad de la capa de transporte). TLS proporciona cifrado para que el tráfico no pueda leerse, autenticación mediante certificados (realmente se está comunicando con example.com) e integridad para que los datos no sean manipulados.
Almacenamiento en caché: acelere las visitas repetidas
Las respuestas pueden incluir Cache-Control: max-age=86400 para que el navegador reutilice durante un día la copia almacenada en caché. Los encabezados ETag y Last-Modified permiten al navegador comprobar si la versión almacenada en caché sigue estando actualizada.
Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMTCookies y sesiones
Los servidores establecen cookies mediante el encabezado Set-Cookie. El navegador las envía automáticamente con cada solicitud al mismo dominio. Por lo general, las sesiones consisten en una cookie que contiene un ID de sesión que el servidor relaciona con los datos del usuario.
CDN — Redes de distribución de contenido
Una CDN almacena copias de sus recursos en centros de datos de todo el mundo. Los usuarios descargan los recursos desde el nodo más cercano, lo que reduce la latencia. Cloudflare, Fastly y AWS CloudFront son CDN populares que utilizan la mayoría de los sitios web grandes.
Comprobación rápida
¿Qué método HTTP se utiliza para solicitar una página web a un servidor?
Resumen: ciclo de vida completo de una solicitud
URL introducida → DNS resuelve el dominio en una IP → conexión TCP (+ TLS) establecida → el navegador envía una solicitud HTTP → el servidor responde con estado + encabezados + cuerpo → el navegador renderiza la respuesta. Cada paso puede observarse en el panel Network de DevTools.
Preguntas frecuentes
¿La lección «DNS y HTTP en los navegadores: ciclo de vida de una solicitud» es gratis?
Sí — el texto completo de «DNS y HTTP en los navegadores: ciclo de vida de una solicitud» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «DNS y HTTP en los navegadores: ciclo de vida de una solicitud»?
Siga una URL desde la barra de direcciones, pasando por la resolución DNS, la conexión TCP y la solicitud HTTP, hasta la respuesta del servidor al navegador. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «DNS y HTTP en los navegadores: ciclo de vida de una solicitud»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- DNS y HTTP en los navegadores: ciclo de vida de una solicitud
- HTML, CSS y JavaScript: función de cada capa
- Cómo se renderiza una página: parsing, DOM, CSSOM, layout y paint
- Herramientas para desarrolladores: abrir y usar DevTools