¿Cómo analiza el navegador un archivo HTML?

El navegador lee el archivo HTML byte por byte. Se construye un flujo de caracteres basado en la codificación del archivo. Este flujo se analiza, formando tokens (etiqueta de apertura y cierre, texto, comentario, doctype). Los tokens se transforman en nodos (nodes), que se enlazan en un árbol: el Modelo de Objeto del Documento (DOM).

El proceso de análisis pasa por las siguientes etapas:

Lectura de bytes: El navegador recibe un flujo de bytes.
Determinación de la codificación: Se determina la codificación del archivo (por ejemplo, UTF-8, Windows-1251). Esto puede ocurrir a través de encabezados HTTP, etiquetas <meta> o mediante detección automática.
Conversión a caracteres: Los bytes se convierten en caracteres según la codificación determinada.

Tokenización: El flujo de caracteres se divide en tokens.

<!-- Ejemplo de tokens -->
<p> // Token: etiqueta de apertura "p"
  Hola, // Token: texto "Hola, "
  mundo! // Token: texto "mundo!"
</p> // Token: etiqueta de cierre "p"

Construcción del AST (Árbol DOM): A partir de la secuencia de tokens, se construye un árbol de nodos (DOM). El navegador mantiene una pila de etiquetas abiertas; cuando encuentra una etiqueta de cierre, cierra la etiqueta correspondiente en la pila y añade su nodo al árbol.

<!-- Estructura simple del DOM para: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo</title>
  </head>
  <body>
    <p>Texto</p>
  </body>
</html>

// El árbol DOM tendrá una estructura que refleja la anidación de las etiquetas.
// Por ejemplo, el nodo "p" será hijo del nodo "body".

Análisis de scripts y estilos: Durante el análisis del HTML, el navegador encuentra las etiquetas <script> y <link>/<style>.
- <script>: Por defecto, el análisis del HTML se detiene, se carga, analiza y ejecuta el script. Después de la ejecución, el análisis del HTML se reanuda. Los atributos async y defer cambian este comportamiento. async ejecuta el script de forma asíncrona, sin bloquear el análisis. defer retrasa la ejecución del script hasta que se complete el análisis del HTML.
- <link> / <style>: El CSS se analiza en paralelo con el HTML y crea un Modelo de Objeto CSS (CSSOM). La presencia de <link> antes de <script> puede retrasar la ejecución del script, ya que el navegador puede esperar a construir el CSSOM para asegurar la correcta aplicación de estilos antes de ejecutar el script.