02. ¿Cómo funciona el navegador?

Curso HTML5 desde cero — Freimel Jerez

El navegador es una de las piezas más importantes de la web. Es el programa encargado de interpretar el código HTML, CSS y JavaScript y mostrarlo correctamente en pantalla.

🌐 ¿Qué es un navegador web?

Un navegador web es una aplicación que permite acceder a páginas web. Algunos ejemplos son:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

⚙️ ¿Qué hace un navegador cuando visitas una página?

Desde que escribes una dirección en la barra hasta que ves la página cargada, el navegador realiza varios pasos que pueden resumirse así:

1. Petición al servidor: El navegador actúa como cliente, envía una solicitud (petición HTTP/HTTPS) al servidor para obtener los archivos de la página.
2. Recepción de archivos: El servidor responde con los archivos HTML, CSS y JavaScript.
3. Análisis de HTML: El navegador lee el HTML y construye la estructura del documento o árbol DOM (Document Object Model).
4. Aplicación de estilos CSS: Se procesan los estilos declarados para darle formato y diseño a los elementos del DOM.
5. Descarga de recursos adicionales: El navegador realiza solicitudes adicionales para obtener imágenes, fuentes, scripts, etc.
6. Ejecuta el JavaScript: Se ejecutan los scripts de la página para dotarla de interactividad y dinamismo.
7. Renderizado final: Con todos los elementos y estilos listos, el navegador pinta la página en pantalla (renderiza) y la muestra al usuario.

🧠 Partes internas de un navegador

Internamente, un navegador moderno se compone de varios subsistemas que trabajan coordinadamente:

1. Interfaz de usuario (User Interface)

Es la parte que ve el usuario: barra de direcciones, botones de navegación, pestañas, menús… Permite interactuar con el programa y con las páginas abiertas.

2. Motor del navegador (Browser Engine)

Actúa como el intermediario entre la interfaz de usuario y el motor de renderizado. Coordina acciones y gestiona peticiones para transformar el código en elementos visuales.

3. Motor de renderizado (Rendering Engine)

Convierte el código HTML y CSS en elementos gráficos visibles en la pantalla. Ejemplos de motores de renderizado son Blink (utilizado por Chrome y Edge) y Gecko (utilizado por Firefox).

4. Subsistemas adicionales

• Motor JavaScript: Ejecuta el código JavaScript de cada página. Chrome y Edge usan el motor V8; Firefox usa SpiderMonkey.
• Sistema de red: Gestiona las conexiones y solicitudes a Internet para descargar los recursos (HTML, imágenes, scripts) de los servidores.
• UI Backend: Se encarga de dibujar botones, cuadros de diálogo y otros widgets básicos en la interfaz.
• Persistencia de datos: Maneja el almacenamiento local (cookies, localStorage, sessionStorage y caché) para recordar preferencias y mejorar el rendimiento.

📄 Ejemplo simple

Si escribes el siguiente código en un archivo HTML:

<h1>Hola navegador</h1>
<p>El navegador interpreta este código</p>

El navegador recibe el archivo HTML, construye el DOM, aplica estilos predeterminados y finalmente muestra “Hola navegador” y un párrafo en pantalla.

🎥 Video de esta lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• El navegador interpreta HTML, CSS y JavaScript para mostrar páginas web.
• Sigue un proceso de petición al servidor, análisis del código y renderizado.
• Está formado por diferentes componentes: interfaz de usuario, motores de navegador y de renderizado, motor JavaScript, sistema de red, backend de UI y almacenamiento.

En la siguiente lección aprenderás qué es HTML.