Como é que o navegador analisa um ficheiro HTML…

O navegador lê o arquivo HTML byte a byte. Com base na codificação do arquivo, constrói um fluxo de caracteres. Este fluxo é analisado, formando tokens (etiqueta de abertura e fechamento, texto, comentário, doctype). Os tokens são transformados em nós (nodes), que são ligados em uma árvore: o Modelo de Objeto do Documento (DOM).

O processo de análise passa pelas seguintes etapas:

Leitura de bytes: O navegador recebe um fluxo de bytes.
Determinção da codificação: A codificação do arquivo é determinada (por exemplo, UTF-8, Windows-1251). Isso pode ocorrer através de cabeçalhos HTTP, tags <meta> ou por detecção automática.
Conversão em caracteres: Os bytes são convertidos em caracteres de acordo com a codificação determinada.

Tokenização: O fluxo de caracteres é dividido em tokens.

<!-- Exemplo de tokens -->
<p> // Token: etiqueta de abertura "p"
  Olá, // Token: texto "Olá, "
  mundo! // Token: texto "mundo!"
</p> // Token: etiqueta de fechamento "p"

Construção do AST (Árvore DOM): A partir da sequência de tokens, constrói-se uma árvore de nós (DOM). O navegador mantém uma pilha de etiquetas abertas; ao encontrar uma etiqueta de fechamento, ela fecha a etiqueta correspondente na pilha e adiciona seu nó à árvore.

<!-- Estrutura DOM simples para: -->
<!DOCTYPE html>
<html>
  <head>
    <title>Exemplo</title>
  </head>
  <body>
    <p>Texto</p>
  </body>
</html>

// A árvore DOM terá uma estrutura que reflete o aninhamento das etiquetas.
// Por exemplo, o nó "p" será filho do nó "body".

Análise de scripts e estilos: Durante a análise do HTML, o navegador encontra as etiquetas <script> e <link>/<style>.
- <script>: Por padrão, a análise do HTML é suspensa, o script é carregado, analisado e executado. Após a execução, a análise do HTML é retomada. Os atributos async e defer alteram esse comportamento. async executa o script de forma assíncrona, sem bloquear a análise. defer adia a execução do script até que a análise do HTML seja concluída.
- <link> / <style>: O CSS é analisado em paralelo com o HTML e cria um Modelo de Objeto CSS (CSSOM). A presença de <link> antes de <script> pode atrasar a execução do script, pois o navegador pode esperar a construção do CSSOM para garantir a aplicação correta dos estilos antes de executar o script.

Como é que o navegador analisa um ficheiro HTML?