Qué ocurre cuando navegas una página

Si tienes conocimientos de redes es un tema que puede parecer evidente, pero sospecho que la mayoría de los usuarios no sabe qué ocurre realmente cuando escribes una dirección (URL) en tu navegador.

Estos son los pasos que se siguen desde que “pides” una página hasta que la puedes visualizar y usar por completo:

1. Introduces una URL en el navegador: no tienes por qué escribirla, puede ser tu página de inicio que se carga automáticamente, un favorito que tengas guardado o simplemente un enlace en el que pinchas.

   URL en la barra de direcciones del navegador

2. El navegador busca la dirección IP del nombre de dominio: los nombres de dominio (en el ejemplo, “blog.marcis.es”) se utilizan para que los usuarios puedan recordar fácilmente las direcciones, pero el dato que necesita nuestro navegador para localizar el servidor web donde está alojado dicho dominio es su dirección IP (unos numeritos como “66.96.234.199″ que en Internet sirven para identificar de forma única un ordenador o una red).
   Para encontrar la correspondencia entre un nombre de dominio y  una dirección IP se utiliza un servicio llamado DNS. La búsqueda se realiza desde lo más cercano hacia lo más lejano, de forma que se intenta optimizar el tiempo de respuesta. Se empieza por la caché del navegador (últimos dominios visitados), continúa por la caché del Sistema Operativo,… hasta llegar, si es necesario, al servidor DNS de nuestro proveedor de internet e incluso a otros servidores DNS si éste no encuentra un resultado válido.

   Ejemplo de funcionamiento del servicio DNS (pincha sobre la imagen para ampliar)

3. El navegador hace una petición mediante HTTP: una vez localizada la dirección IP correcta, el navegador le envía una petición mediante un protocolo de comunicación llamado HTTP. Dicha petición, además de la dirección que se desea navegar, incluye otra información como el tipo de navegador, las respuestas que acepta y opcionalmente, algún dato sobre el usuario si ha visitado previamente dicha página web:
   

   GET http://blog.marcis.es/ HTTP/1.1
   Accept: application/x-ms-application, image/jpeg, …
   Accept-Language: es-ES
   User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; …
   Accept-Encoding: gzip, deflate
   Connection: Keep-Alive
   Cookie: …
   Host: blog.marcis.es

4. El servidor web envía una respuesta:
   • Si se produce un error (por ejemplo, página no encontrada) el servidor web enviará unos códigos especiales indicando los detalles del problema. El navegador mostrará al usuario un mensaje explicando el error y sus posibles causas.

     Códigos de respuesta HTTP (pincha sobre la imagen para ampliar)

   • Si la página ha cambiado de dirección, el servidor web lo indica mediante una redirección y el correspondiente código. En este caso, el navegador realiza una nueva petición comenzando el proceso de nuevo.
   • Si todo va bien, el servidor web devuelve una página HTML. Ésta puede obtenerse de forma estática (ya está “escrita” y es la misma para todas las peticiones) o dinámica (se genera en el momento y puede variar en función del navegador, el usuario que accede,…), pero ese es otro tema.

   HTTP/1.1 200 OK
   Cache-Control: private, no-store, no-cache, must-revalidate
   Expires: Sat, 01 Jan 2000 00:00:00 GMT
   Pragma: no-cache
   Content-Encoding: gzip
   Content-Type: text/html; charset=utf-8
   X-Cnection: close
   Transfer-Encoding: chunked
   Date: Fri, 12 Feb 2010 09:05:55 GMT

5. El navegador recibe y “trata” la respuesta: incluso antes de tener la respuesta completa, el navegador puede empezar a “dibujar” el resultado en pantalla para que el usuario lo pueda ver lo antes posible.

   El navegador "renderiza" el HTML recibido

6. El navegador pide el resto de objetos necesarios: una vez recibida la primera respuesta en HTML, ésta puede contener imágenes, hojas de estilo (CSS), archivos de javascript,… que son independientes, con su propia URL y requieren, por lo tanto, nuevas peticiones HTTP.

   El navegador pide las imágenes incluídas en el documento HTML

7. El navegador carga dichos objetos: si recibe una respuesta correcta por parte del servidor web, aplica los cambios necesarios: mostrar las imágenes en el lugar apropiado, redibujar la página según los estilos, modificar los contenidos,…
8. Opcionalmente, se realizan nuevas peticiones mediante AJAX: muchos sitios web no se limitan a un comportamiento “estático” sino que incluyen aplicaciones que continúan comunicándose con el servidor, realizando pequeñas peticiones (mediante Javascript) cuyo resultado (en XML, de ahí las siglas AJAX) les permite interactuar de forma más ágil con el usuario. Un ejemplo podría ser el chat que incluyen algunas páginas web.

   Modelo clásico vs. Modelo Ajax (pincha sobre la imagen para ampliar)

Este artículo es una adaptación y traducción al español de What really happens when you navigate to a URL.