Navegador

# Funcionamiento del Navegador
Created by <i class="fab fa-telegram"></i>
[edme88]("https://t.me/edme88")

---

<style>
.grid-container2 {
    display: grid;
    grid-template-columns: auto auto;
    font-size: 0.8em;
    text-align: left !important;
}

.grid-item {
    border: 3px solid rgba(121, 177, 217, 0.8);
    padding: 20px;
    text-align: left !important;
}
</style>
## Temario
<div class="grid-container2">
<div class="grid-item">

- Ciclo de vida de una página web
- Eventos del Ciclo de Vida
- Optimización
- DevTools

</div>
<div class="grid-item">

</div>
</div>

---

## Ciclo de Vida de una Página Web

1. Ingreso de la URL y resolución DNS
2. Conexión TCP/TLS
3. Solicitud HTTP/HTTPS
4. Respuesta del servidor
5. Parseo y construcción del DOM y CSSOM
6. Generación del Render Tree
7. Layout (Reflow)
8. Pintado (Painting)
9. Composición (Compositing)
10. Interacción y ciclo dinámico

----

### 1. Ingreso de la URL y resolución DNS

El ciclo comienza cuando el usuario escribe una URL en el navegador o hace clic en un enlace.
- El navegador consulta al DNS (Domain Name System) para traducir el nombre de dominio (ej: www.ejemplo.com) en una dirección IP.
- Con la dirección IP, puede ubicar el servidor que aloja el sitio.

----

### 2. Conexión TCP/TLS
- El navegador abre una conexión TCP con el servidor.
- Si la conexión es HTTPS, ocurre el handshake TLS:
    - Intercambio de certificados.
    - Negociación de claves de cifrado.
    - Establecimiento de un canal seguro.

----

### 3. Solicitud HTTP/HTTPS

Una vez establecida la conexión, el navegador envía una solicitud HTTP o HTTPS al servidor correspondiente. Esta solicitud puede incluir cabeceras, cookies o tokens que identifican al cliente.

----

### 4. Respuesta del servidor

El servidor procesa la petición y responde con un código de estado HTTP y los recursos solicitados, que incluyen:
- El documento HTML principal.
- Archivos adicionales: CSS, JavaScript, imágenes, fuentes, videos, etc.

----

### 5. Parseo y construcción del DOM y CSSOM

Una vez recibido el HTML, el navegador lo interpreta paso a paso:
- Construye el DOM (Document Object Model), que es una representación en memoria de la estructura del documento HTML.
- Descarga y procesa los archivos CSS para crear el CSSOM (CSS Object Model).
- Si encuentra un `<script>` bloqueante, puede pausar el parseo hasta que lo ejecute.

----

### 6. Generación del Render Tree

El DOM y el CSSOM se combinan para formar el árbol de renderizado (Render Tree), que contiene la información de qué elementos deben mostrarse y cómo deben hacerlo.

----

### 7. Layout (Reflow)

El navegador calcula la posición y tamaño exactos de cada elemento en la página (layout). Aquí se determinan dimensiones, márgenes, alineaciones y relaciones entre los elementos.

----

### 8. Pintado (Painting)

Con el layout definido, el navegador pinta los píxeles en la pantalla, aplicando colores, bordes, imágenes y tipografías.

----

### 9. Composición (Compositing)

En esta etapa final, el navegador organiza las capas de la página (ej. un menú fijo sobre el contenido, una animación, etc.) y las combina en la pantalla del usuario.

----

### 10. Interacción y ciclo dinámico

Una vez renderizada la página, comienza la interacción con el usuario:
- El JavaScript puede modificar el DOM, hacer nuevas solicitudes (AJAX, fetch) o generar cambios dinámicos.
- Esto puede disparar nuevamente procesos de layout, paint o incluso compositing parcial.

---

### Ejercicio: Análisis de DNS, TCP/TLS, Solicitud/Respuesa

1. Abrí las DevTools → Network en Chrome/Firefox.
2. Ingresá a una página (ej: https://www.wikipedia.org/).
3. Observá:
   - DNS Lookup: cuánto tarda en resolver el dominio.
   - Initial connection (TCP/TLS): tiempo del handshake.
   - Request/Response: ver las cabeceras HTTP.
4. Compará tiempos con otra web (ej: https://github.com/).

----

![Timing](images/navegador/navegador-tiempos.png)

---

### Eventos clave del ciclo de vida

- **DOMContentLoaded:** el DOM está construido (sin esperar imágenes o estilos).
- **load:** se cargaron todos los recursos.
- **beforeunload / unload:** cuando se abandona la página.

---

### Optimización (performance)

- El **Reflow** es costoso. Cambios en dimensiones disparan recalculados completos.
- El **Repaint** es menos costoso, solo cambia lo visual (ej. color).
- El **Compositing** puede mover capas sin recalcular layout ni repintar.

Usar técnicas como:
- will-change, transform y opacity para animaciones.
- Scripts con defer/async para no bloquear el parseo.
- Minimizar CSS y JS innecesario.

---

### DevTools

Son un conjunto de herramientas para desarrolladores web que están integradas directamente en el navegador. Esto permite editar páginas renderizadas y diagnosticar problemas con rapidez, lo que te ayuda a crear mejores sitios web en menos tiempo.

---

### Dev Tools

- **Elements:** inspección y edición de HTML/CSS.
- **Console:** ejecución de JavaScript, visualización de logs y errores 
- **Sources:** depuración de JavaScript, puntos de interrupción (breakpoints), navegación entre archivos de código 
- **Network:** monitoreo de las solicitudes de red, tiempos de carga, recursos, etc. 
- **Performance:** análisis detallado del rendimiento (carga, interacciones, CPU, memoria, frames) 
- **Application:** gestión del almacenamiento local, IndexedDB, service workers, cachés 
- **Security:** verificación de seguridad, certificados, contenido mixto 
- **Otros paneles:** Lighthouse, Memory, Accessibility, CSS Overview y más

---

## [Chrome Dev Tools](https://developer.chrome.com/docs/devtools?hl=es-419)

Es un conjunto de herramientas incorporadas en el navegador que permiten editar páginas en tiempo real, diagnosticar problemas y optimizar el desarrollo web.

---

## Temas complementarios en el ciclo de vida

Además de las etapas principales del renderizado, existen factores clave que afectan:
- **Performance** (caché, CDN, ruta crítica).
- **Interacción y eventos** (eventos globales, animaciones).
- **Accesibilidad (A11y)** para todos los usuarios.
- **Seguridad** frente a ataques y vulnerabilidades.

Estos temas completan la visión del ciclo de vida de una página web en un entorno real.

---

### Caché del navegador y CDN

El navegador no descarga los recursos cada vez que visitas un sitio, sino que los almacena en caché (archivos temporales en disco o memoria).
- Objetivo: reducir tiempos de carga y tráfico de red.
- Mecanismos de control:
  - **Cache-Control:** define cuánto tiempo un recurso puede permanecer en caché.
  - **ETag:** identificador único que permite validar si un recurso cambió.
  - **Last-Modified:** fecha de la última modificación del recurso.

----

### CDN

Los CDN (Content Delivery Network) son redes distribuidas de servidores que almacenan copias de recursos estáticos en distintas regiones del mundo. El navegador descarga los archivos desde el nodo más cercano, reduciendo latencia y mejorando la disponibilidad.

----

### Critical Rendering Path

Es la **ruta crítica de renderizado** que el navegador sigue desde recibir el HTML hasta mostrar el primer píxel en pantalla.

- Se consideran críticos los recursos que bloquean la renderización inicial, como CSS o scripts bloqueantes.
- Optimizar el CRP implica:
  - Inyectar CSS crítico en línea (para el contenido visible sin scroll).
  - Cargar scripts con defer o async.
  - Usar lazy loading para imágenes y videos fuera de pantalla.

Mientras más corto sea este camino, más rápida será la percepción de carga para el usuario.

---

### Eventos del navegador

Los navegadores exponen múltiples **eventos globales** que permiten reaccionar a cambios en la ventana o documento:
- **visibilitychange:** detecta si la pestaña se oculta o vuelve a primer plano.
- **resize:** se dispara cuando la ventana cambia de tamaño.
- **scroll:** ocurre al desplazarse dentro de la página.
- **beforeunload:** permite advertir al usuario antes de abandonar la página.

Además, existe la API **requestAnimationFrame**, pensada para animaciones fluidas porque sincroniza las actualizaciones con la tasa de refresco de la pantalla.

---

### Accesibilidad (A11y)

La accesibilidad busca que cualquier persona, incluidas aquellas con discapacidades, pueda usar un sitio web.

- Ejemplo: un lector de pantalla convierte el DOM en voz.

Buenas prácticas:
- Incluir atributos alt en imágenes.
- Usar etiquetas semánticas (`<header>, <nav>, <main>`).
- Roles y atributos aria-* para describir la función de los elementos.
- Contraste suficiente en colores y tamaños de fuente legibles.

Los navegadores interpretan estas señales para brindar accesibilidad mediante tecnologías asistivas.

---

### Ejercicios: Axe
1. Instala el plugin de [Axe](https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=es-419) en Chrome.
2. Ejecuta las validaciones de accesibilidad en alguna página (Ejemplo: https://tienda.claro.com.ar/)

---

### Ejercicios: Lighthouse
1. Instala el plugin de [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=es) en Chrome.
2. Ejecuta las validaciones en **Desktop** de performance, accesibilidad, best practices y SEO en alguna página (Ejemplo: https://tienda.claro.com.ar/)
3. Ejecuta las validaciones en **Mobile** de performance, accesibilidad, best practices y SEO en alguna página (Ejemplo: https://tienda.claro.com.ar/)

---

### Seguridad en el ciclo de vida de la página

Durante la carga y ejecución de un sitio, intervienen varios mecanismos de seguridad:
- **Same-Origin Policy (SOP):** impide que scripts de un origen accedan a recursos de otro origen sin permiso.
- **CORS (Cross-Origin Resource Sharing):** mecanismo que permite compartir recursos entre orígenes de forma controlada.
- **Content Security Policy (CSP):** cabecera que limita qué scripts, estilos o recursos pueden cargarse, reduciendo riesgos de XSS (Cross-Site Scripting).
- **Mixed content:** cuando una página HTTPS carga recursos HTTP inseguros. Esto degrada la seguridad y los navegadores lo bloquean o advierten.

---
## ¿Dudas, Preguntas, Comentarios?
![DUDAS](images/pregunta.gif)