Anatomía de una página web moderna: del marcado al renderizado

Una página web es un recurso compuesto que el navegador ensambla a partir de múltiples tecnologías.

Bloques de construcción esenciales

• HTML — Estructura semántica: encabezados, párrafos, formularios, enlaces.
• CSS — Diseño visual: disposición (Flexbox/Grid), tipografía, color, puntos de interrupción responsivos.
• JavaScript — Interactividad: manipulación del DOM, fetch/XHR, frameworks (React, Vue).
• Recursos multimedia — Imágenes (WebP, AVIF), video (H.264/HEVC), audio, gráficos WebGL/Canvas.
• Fuentes e iconos — Fuentes WOFF2, sistemas de iconos SVG.
• Metadatos — Etiquetas SEO, Open Graph, datos estructurados JSON-LD.

Canal de entrega

1. El desarrollador crea los archivos fuente.
2. Herramientas de compilación (Vite, Webpack) agrupan, minifican y agregan hash a los nombres de archivo.
3. Los archivos se implementan en el servidor de origen o en nodos edge de CDN.
4. El navegador solicita HTML → lo analiza → descubre subrecursos → los descarga en paralelo → construye el árbol de renderizado → pinta los píxeles.

El rendimiento depende de la optimización de la ruta crítica: insertar CSS por encima del doblez, diferir JavaScript no esencial y aprovechar la multiplexación HTTP/2 o HTTP/3.