¿Cómo se muestra un sitio web?

Mostrar un sitio web implica varias capas, desde el servidor que aloja el sitio web hasta su navegador interpretando el código y lo convierte en su pantalla. Aquí hay un desglose del proceso:

1. Solicitar el sitio web (inicia el proceso):

* Escribiendo la URL (o haciendo clic en un enlace): Ingrese una dirección de sitio web (localizador de recursos uniforme o URL) como `www.example.com` en la barra de direcciones de su navegador o haga clic en un hipervínculo.

* Búsqueda de DNS: Su navegador (o sistema operativo) utiliza el sistema de nombres de dominio (DNS) para traducir la URL legible por humanos (por ejemplo, `www.example.com`) en la dirección IP del servidor que aloja el sitio web (por ejemplo,` 192.0.2.1`). Piense en DNS como una agenda telefónica para Internet. Su computadora envía una solicitud a un servidor DNS (generalmente proporcionado por su proveedor de servicios de Internet) para encontrar la dirección IP asociada con el nombre de dominio.

2. Respuesta del servidor:

* Solicitud http: Su navegador envía una solicitud HTTP (Protocolo de transferencia de hipertexto) al servidor en la dirección IP recuperada. Esta solicitud especifica lo que está pidiendo (generalmente la página web principal, a menudo `index.html` o similar). El método de solicitud suele ser `get` (para recuperar un recurso) pero también puede ser` post '(para enviar datos), `put`,` delete', etc.

* Procesamiento del servidor: El servidor web recibe la solicitud HTTP. Identifica el recurso que se solicita (por ejemplo, `index.html`). El servidor podría:

* Sirva directamente un archivo estático (como `index.html`,` image.jpg`, `style.css`).

* Ejecutar código del lado del servidor (PHP, Python, Java, Node.js, etc.) para generar contenido dinámico. Este código puede acceder a bases de datos, cuentas de usuario u otras fuentes de datos.

* Realice las verificaciones de autenticación y autorización para asegurarse de tener permiso para acceder al recurso solicitado.

* Respuesta http: El servidor prepara una respuesta HTTP, que incluye:

* Código de estado: Un código que indica el éxito o el fracaso de la solicitud (por ejemplo, 200 OK, 404 no encontrado, 500 error de servidor interno).

* encabezados: Metadatos sobre la respuesta (por ejemplo, tipo de contenido, codificación de caracteres, instrucciones de almacenamiento en caché). El encabezado `Content-type` es particularmente importante, ya que le dice al navegador qué tipo de datos esperar (por ejemplo,` text/html`, `image/jpeg`,` aplicación/javaScript`).

* cuerpo: El contenido real de la página web (HTML, CSS, JavaScript, imágenes, etc.).

3. Renderización del navegador:

* Recibiendo la respuesta: Su navegador recibe la respuesta HTTP del servidor.

* Analización de html: El navegador analiza el código HTML en el cuerpo de respuesta. HTML (lenguaje de marcado de hipertexto) define la estructura y el contenido de la página web (encabezados, párrafos, imágenes, enlaces, etc.). El navegador construye un modelo de objeto de documento (DOM), que es una representación similar a un árbol de la estructura HTML.

* Analización de CSS: El navegador analiza cualquier código CSS (hojas de estilo en cascada), ya sea incrustado directamente en el HTML (usando `` etiquetas) o vinculado desde archivos CSS externos. CSS define el estilo visual de la página web (colores, fuentes, diseño, etc.). El navegador crea un modelo de objeto CSS (CSSOM) y lo combina con el DOM para crear un árbol de renderizado.

* Ejecutando JavaScript: El navegador ejecuta cualquier código JavaScript, ya sea integrado en el HTML (usando `