¿Qué sucede exactamente cuando navega por un sitio web en su navegador?

64

¿Qué sucede detrás de escena cuando escribimos www.cnn.com en un navegador y cómo se muestra la información en la pantalla?

Una explicación técnica sería muy apreciada.

Rachel
fuente
Se puede encontrar una gran explicación técnica en este libro: Redes informáticas: un enfoque de arriba hacia abajo, 6ª edición (Enlace: Libro ). (páginas 495-500) Entran en una cantidad considerable de detalles; a partir de lo que sucede cuando se enciende la computadora hasta el momento en que se muestra un sitio web en el navegador del usuario. Puede tener una idea de lo que se menciona en el libro en este conjunto de diapositivas. (Enlace: Diapositivas 88 a 95)
Slothworks
Puede encontrar información detallada aquí: github.com/vasanthk/how-web-works o allí html5rocks.com/en/tutorials/internals/howbrowserswork
mems

Respuestas:

134

Navegador: "Ok, entonces, tengo un usuario que solicita esta dirección: www.cnn.com. Supongo que dado que no hay barras ni nada, esta es una solicitud directa de una página principal. Tampoco había un protocolo o puerto definido, así que supondré que es HTTP e iré al puerto 80 ... bueno, lo primero es lo primero. ¡Hola DNS, amigo, despierta! ¿Dónde se esconde este www.cnn.com? "

DNS: "Correcto ... espera un segundo, preguntaré a los servidores ISP. Ok, parece 157.166.226.25".

Navegador: "Ok. Internet Protocol Suite, ¡es tu turno! Llama al 157.166.226.25, por favor. Envíales este encabezado HTTP. Está pidiendo la estructura básica y el contenido de su página principal, así que sé qué más buscar ... oh, bueno, no es que te importe esto, supongo ".

TCP / IP: "¿A qué te refieres con mi turno ? ¿Como si no estuviera trabajando para el DNS? Dios, ¿qué se necesita para obtener un poco de aprecio aquí ..."

Navegador: ...

TCP / IP: "Sí, sí ... Conectando ... Solo pediré a la puerta de enlace que lo reenvíe. Sabes, no es tan fácil, tendré que dividir tu bonita solicitud allí en varias partes así que llega al final y reúne todo lo que envían de los miles de paquetes que recibo ... ah, claro, no te importa. Cifras ".

Mientras tanto, en la sede de CNN, un mensaje finalmente termina en la puerta del servidor web.

CNN Web Server: "¡Nzhôô! ¡Un cliente! ¡Quiere noticias! ¡La primera página! ¿Qué tal?"

Motor de secuencia de comandos del lado del servidor CNN: "¡Correcto, lo hará! Primera página, ¿verdad?"

CNN Database Server: "¡Sí! ¡Trabaja para mí! ¿Qué contenido necesitas?"

Motor de scripts del lado del servidor CNN: "... um, lo siento DB, tengo una copia de la página principal aquí en mi caché, no es necesario compilar nada. Pero bueno, toma esta identificación de usuario y guárdala, la enviaré al cliente también, para que sepamos con quién estamos hablando más adelante ".

Servidor de base de datos de CNN: "¡Sí!"

De vuelta en la computadora del usuario ...

TCP / IP: "Ooookay, aquí viene la respuesta. Oh muchacho, ¿por qué tengo la sensación de que será grande ..."

Navegador: "Uh, wow ... esto tiene todo tipo de código javascript ... un montón de imágenes, un par de formas ... Correcto, esto tomará un tiempo para renderizar. Mejor llegar. Hola, sistema IP, hay muchas más cosas que necesitará obtener. Veamos que necesito algunas hojas de estilo de i.cdn.turner.com - a través de HTTP y solicite el archivo /cnn/.element/css/2.0/common.css. Y luego obtenga algunos de esos scripts en i.cdn.turner.com también, estoy contando seis hasta ahora ... "

TCP / IP: "Entiendo la imagen. Solo dame las direcciones del servidor y todo eso. Y envuelve ese archivo dentro de la solicitud HTTP, no quiero tratar con eso".

DNS: "Comprobando el i.cdn.turner.com ... bueno, un poco de curiosidad, en realidad se llama cdn.cnn.com.c.footprint.net. IP es 4.23.41.126"

Navegador: "Claro, claro ... espera un segundo, esto tomará unos pocos segundos para procesar, estoy tratando de entender todo este script ..."

TCP / IP: "Oye, aquí está el CSS que pediste. Ah, y ... sí, esos scripts adicionales también volvieron".

Navegador: "¡Vaya, hay más ... algún tipo de anuncio de video!"

TCP / IP: "Oh, qué divertido suena eso ..."

Navegador: "¡También hay todo tipo de imágenes! Y este CSS se ve un poco desagradable ... correcto, así que si esa parte va allí, y tiene esta línea en la parte superior ... cómo demonios encajaría más ... no , Tendré que estirar esto un poco para hacerlo ... Oh, pero ese otro archivo CSS anula esa regla ... Bueno, este no será una pieza fácil de renderizar, ¡eso es seguro! "

TCP / IP: "Ok, ok, deja de distraerme por un segundo, todavía hay mucho que hacer aquí".

Navegador: "Usuario, aquí hay un pequeño informe de progreso para usted. Lo siento, todo esto puede tomar unos segundos, hay como 140 elementos diferentes para cargar, y hasta el momento 16 hasta ahora".

Uno o dos segundos después ...

TCP / IP: "Ok, eso debería ser todo. Oye, escucha ... perdón por haberte molestado antes, ¿te las arreglaste allí? Esto seguramente parece ser una carga para ti también".

Navegador: "Uf, sí, son todos estos sitios web hoy en día, seguro que no te lo ponen fácil. Bueno, me las arreglaré. Para eso estoy aquí".

TCP / IP: "Supongo que es bastante pesado para todos nosotros en estos días ... ¡oh, dejen de regodearse allí DNS!"

Navegador: "¡Hola, usuario! El sitio web está listo. ¡Ve a recibir tus noticias!"

Ilari Kajaste
fuente
17
Así que esto es lo que hace mi PC después del anochecer.
Phoshi
77
Gran explicación ... Te quito el sombrero ... Bingo ...
Rachel
77
Maravillosa pieza de narración :)
Michael Borgwardt
55
@dex: ... y hasta el día de hoy siguen siendo fuertes, resolviendo todas las solicitudes caprichosas del usuario con una diligencia digna de elogio en los libros de historia. Pero, como todas las cosas, algún día será su momento de retirarse a la obsolescencia, dando paso con gracia a enfoques más modernos adecuados para los tiempos más modernos. Pero tenga la seguridad de que siempre estarán allí, en nuestro legado, observando con una sonrisa de complicidad y transmitiendo a las generaciones futuras todas las duras lecciones que aprendieron durante estos tiempos vibrantes de comunicaciones emergentes de Internet.
Ilari Kajaste
3
¡Hurra por los detractores, verdad, @wahnfrieden? Lo considero bastante preciso e informativo.
Jürgen A. Erhard
18
  • El navegador divide lo que escribe (la URL) en un nombre de host y una ruta.
  • El navegador forma una solicitud HTTP para solicitar los datos en el nombre de host y la ruta dados.
  • El navegador realiza una búsqueda de DNS para resolver el nombre de host en una dirección IP.
  • El navegador forma una conexión TCP / IP a la computadora especificada a través de la dirección IP. (Esta conexión en realidad se forma a partir de muchas computadoras, cada una pasando los datos a la siguiente).
  • El navegador envía la solicitud HTTP por la conexión a la dirección IP dada.
  • Esa computadora recibe la solicitud HTTP de la conexión TCP / IP y la pasa al programa del servidor web.
  • El servidor web lee el nombre de host y la ruta y encuentra o genera los datos que ha solicitado.
  • El servidor web genera una respuesta HTTP que contiene esos datos.
  • El servidor web envía esa respuesta HTTP por la conexión TCP / IP a su máquina.
  • El navegador recibe la respuesta HTTP y la divide en encabezados (que describen los datos) y el cuerpo (los datos en sí).
  • El navegador interpreta los datos para decidir cómo mostrarlos en el navegador; por lo general, estos son datos HTML que especifican los tipos de información y su forma general.
  • Algunos de los datos serán metadatos que especifiquen más recursos que deben cargarse, como hojas de estilo para un diseño detallado, imágenes en línea o películas Flash. Estos metadatos se especifican nuevamente como una URL, y todo este proceso se repite para cada uno hasta que se cargan todos.
Kylotan
fuente
Esto es bueno, pero vale la pena mencionar el almacenamiento en caché (en el navegador y en otros lugares), proxies, equilibrio de carga, CDN, etc. Creo que todo esto es una parte crucial para comprender cómo (en la tierra) los sitios ocupados manejan millones de solicitudes casi simultáneas de grandes cantidades de contenido.
Sam Dutton
12

El primer paso es la búsqueda de DNS (servidor de nombres de dominio). Utiliza los servidores DNS especificados en la configuración de su red (o que DHCP le proporcionó) para buscar el dominio superior (cnn.com) y luego solicitar al servidor de nombres de ese dominio la dirección IP del subdominio especificado (www.cnn.com).

Una vez que tiene la dirección IP, su navegador comienza a comunicarse con el servidor web. Esto se hace utilizando el protocolo especificado (que generalmente es HTTP 1.1 por defecto). Se realiza una solicitud 'GET' para '/' al servidor, que responde con el contenido del documento HTML y los encabezados apropiados (que le indican al navegador el tipo de contenido del documento, HTML y otra información). Luego, el navegador analiza el documento y encuentra las URL que necesita incrustar en la página (como imágenes u hojas de estilo vinculadas) y realiza solicitudes GET en cada una de ellas.

El navegador también suele realizar automáticamente una solicitud GET para '/favicon.ico' (para mostrar el pequeño icono de CNN junto al título del sitio).

Es probable que su navegador también especifique en sus encabezados de solicitud que desea comprimir el contenido de la respuesta, utilizando el algoritmo gzip. Esto hace que la descarga del archivo sea mucho más pequeña, si el servidor lo admite. Todo esto es transparente para usted, a pesar de que es como descargar un archivo ZIP y descomprimirlo.

Cuando vuelve a cargar la página, su navegador verifica si esa página ya está almacenada en caché en su sistema, y ​​si es así, realiza una solicitud HTTP solo para el encabezado del documento, y verifica su fecha de modificación. Si esta fecha es posterior a su copia en caché, vuelve a solicitar el contenido completo del documento y actualiza la página. De lo contrario, solo usa su copia local.

Wahnfrieden
fuente
El tipo no conoce los conceptos básicos y simplemente lo sopló con DNS, DHCP e IP. ¡Vamos a explicarle la estructura del paquete IP!
66
Pidió detalles técnicos. Puede buscar IP si lo desea.
La cosa es que probablemente no quiera buscar nada ... :(
8

Lo que pasa lejos de las otras respuestas es lo que sucede en el lado de CNN:

  • Una máquina en CNN recibe el mensaje de su computadora solicitando la página.
  • Redirige esta solicitud a una de las muchas computadoras que CNN está utilizando para su sitio web (la razón de esto es que, de esta manera, puede difundir el trabajo de reunir las páginas web de respuesta en muchas computadoras)
  • La computadora de CNN recibe su solicitud y responde con una página web que probablemente esté precalculada casi por completo, pero tal vez cambie algunas cosas antes de enviársela (podría ser el anuncio en la parte superior, tal vez el titular de las noticias). A veces, las computadoras ensamblan la página a partir de muchos componentes pequeños cada vez que reciben una solicitud; no estoy seguro de lo que hace CNN
  • la respuesta se abre paso a través de la red a su computadora, que luego la muestra.
  • la respuesta no incluyó las imágenes: su computadora luego envía otra solicitud para las imágenes, y ocurre casi el mismo escenario.
redtuna
fuente
6

Obviamente, esta no es una explicación técnica, pero es una linda ayuda visual (del excelente Vladstudio.com ) que puede ser útil para algunos:

Cómo funciona internet

grautur
fuente
1

La información que acaba de preguntar podría llenar un par de docenas de libros. Pero aquí está mi intento de explicarlo: su navegador le dice a su sistema operativo que busque la dirección IP de cnn.com. Luego, su sistema operativo le pide a un servidor DNS la dirección IP de cnn.com. La IP se envía a la carpeta de contacto que contacta con la dirección IP y solicita la página. cnn.com luego te envía una página html. Los navegadores analizan el html y envían la información al procesador HTML. El navegador luego le dice al sistema operativo qué mostrar en la pantalla.

AyexeM
fuente
1

Hay un video realmente genial del "Sendung mit der Maus" (un popular programa de televisión infantil alemán que explica la tecnología para niños):

Die Sendung mit der Maus - Wie funktioniert das Internet (Cómo funciona Internet).

Solo en alemán, desafortunadamente, pero divertido incluso sin el texto. Los hombres con cascos divertidos juegan los paquetes IP, y los datos se escriben en tarjetas de papel. Clásico :-).

Por cierto, las explicaciones son bastante buenas.

sleske
fuente