Cómo los Navegadores Cargan Páginas
De URL a píxeles: redes, análisis y renderizado
De URL a Píxeles
Cuando escribes una URL y presionas Enter, el navegador realiza varios pasos para convertir código en píxeles. Entender este pipeline te ayuda a escribir HTML más rápido y confiable.
1) Red y Respuesta del Servidor
- Búsqueda DNS: Encuentra la IP del servidor para el dominio.
- Conexión TCP: Abre una conexión al servidor.
- Handshake TLS: Encripta la conexión para HTTPS.
- Solicitud HTTP: El navegador solicita el documento HTML.
- Respuesta HTTP: El servidor devuelve HTML, headers e info de caché.
Análisis: HTML → DOM, CSS → CSSOM
Análisis HTML (DOM)
El navegador lee HTML de arriba a abajo y construye el Document Object Model (DOM). Cada elemento se convierte en un nodo en el árbol.
Análisis CSS (CSSOM)
Las hojas de estilo se analizan en el CSSOM. El navegador combina DOM + CSSOM para crear el Render Tree.
El Pipeline de Renderizado
- Estilo: Calcular estilos para cada nodo.
- Layout: Calcular tamaños y posiciones.
- Pintado: Dibujar píxeles (texto, colores, bordes, imágenes).
- Composición: Combinar capas en el frame final.
Scripts y Bloqueo
JavaScript puede pausar el análisis de HTML. Usa defer o async para scripts no críticos.
Script Bloqueante
<script src="app.js"></script>El análisis se detiene hasta que el script se descarga y ejecuta.
Script No Bloqueante
<script src="app.js" defer></script>defer se ejecuta después de que el análisis HTML esté completo.
✓ Consejos de Velocidad
- ✓ Mantén el HTML ligero y evita scripts inline masivos.
- ✓ Carga CSS temprano y difiere JavaScript no crítico.
- ✓ Comprime activos y habilita headers de caché.
- ✓ Optimiza imágenes y usa formatos modernos (WebP/AVIF).