¿Cómo procesa el navegador la página web?

El proceso de procesamiento de una página web por el navegador se puede dividir en varias etapas:

1. Solicitud y obtención del recurso:

   • El usuario ingresa la URL en la barra de direcciones o hace clic en un enlace.
   • El navegador envía una solicitud HTTP al servidor.
   • El servidor procesa la solicitud y envía una respuesta, que generalmente contiene un documento HTML.

2. Análisis sintáctico (Parsing):

   • El navegador recibe el documento HTML en forma de bytes.
   • Estos bytes se decodifican en caracteres según la codificación especificada.
   • El parser HTML analiza el documento carácter por carácter y construye el árbol DOM (Document Object Model). El DOM representa la estructura lógica del documento.
   • Al detectar etiquetas <link> (para CSS) o <script> (para JavaScript), el navegador comienza a descargar estos recursos en paralelo con el análisis del HTML.

3. Construcción del CSSOM:

   • El parser CSS analiza las reglas CSS de las etiquetas <style>, <link> y estilos en línea.
   • A partir de estas reglas, se construye el árbol CSSOM (CSS Object Model), que contiene todos los estilos para cada elemento en la página.

4. Construcción del árbol de renderizado (Render Tree):

   • El Render Tree combina el DOM y el CSSOM. Solo contiene los elementos que se mostrarán en la página y sus estilos correspondientes.
   • Los elementos con la regla CSS display: none; no se incluyen en el Render Tree.

5. Layout (Reflow):

   • El navegador calcula las dimensiones y posiciones exactas de cada elemento en la página basándose en el Render Tree. Este proceso se llama Layout o Reflow.
   • El Layout ocurre en la primera construcción del Render Tree y también cuando cambian el tamaño de la ventana, se añaden o eliminan elementos, o cambian sus estilos.

6. Dibujo (Painting / Repaint):

   • El navegador dibuja cada elemento en la pantalla usando la información del Render Tree y los resultados del paso de Layout.
   • El Painting también puede ocurrir cuando cambian las propiedades visibles del elemento, como color, fondo, opacidad, sin cambiar su geometría (esto se llama Repaint).

7. Composición:

   • Los elementos que se dibujan pueden ser agrupados en diferentes capas para optimizar el renderizado y la animación.
   • Estas capas se combinan para mostrar la página final en la pantalla.

8. Ejecución de scripts:

   • Cuando el parser HTML alcanza la etiqueta <script>, la ejecución del análisis HTML se pausa (por defecto), y el navegador descarga, analiza y ejecuta el código JavaScript.
   • JavaScript puede modificar el DOM y el CSSOM, lo que puede provocar pasos repetidos de Layout y Painting.
   • Los atributos async y defer en la etiqueta <script> afectan el orden y el momento de ejecución de los scripts, permitiendo continuar con el análisis del HTML.

Aquí hay una visualización aproximada del flujo:

Solicitud HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (en paralelo)
    ↓           ↓
    Árbol DOM  Árbol CSSOM
          ↓
     Árbol de renderizado
          ↓
        Layout
          ↓
       Dibujo
          ↓
     Composición
          ↓
   Pantalla

La ejecución de JavaScript puede interrumpir en diferentes etapas, provocando pasos repetidos:

Parser HTML + etiqueta Script
↓
Pausa el análisis HTML
↓
Descarga el Script
↓
Analiza el Script
↓
Ejecuta el Script
↓
(Puede modificar DOM/CSSOM → Trigger Layout/Paint)
↓
Reanuda el análisis HTML

Comprender este proceso es importante para optimizar el rendimiento de las páginas web.