Como é que o navegador processa a página web?

O processo de processamento de uma página web pelo navegador pode ser dividido em várias etapas:

1. Requisição e obtenção do recurso:

   • O utilizador insere a URL na barra de endereços ou clica num link.
   • O navegador envia uma requisição HTTP ao servidor.
   • O servidor processa a requisição e envia uma resposta, que geralmente contém um documento HTML.

2. Análise sintática (Parsing):

   • O navegador recebe o documento HTML em forma de bytes.
   • Estes bytes são decodificados em caracteres de acordo com a codificação especificada.
   • O parser HTML analisa o documento caractere por caractere e constrói a árvore DOM (Document Object Model). O DOM representa a estrutura lógica do documento.
   • Ao detectar tags <link> (para CSS) ou <script> (para JavaScript), o navegador começa a descarregar esses recursos em paralelo com a análise do HTML.

3. Construção do CSSOM:

   • O parser CSS analisa as regras CSS das tags <style>, <link> e estilos inline.
   • Com base nessas regras, constrói-se a árvore CSSOM (CSS Object Model), que contém todos os estilos para cada elemento na página.

4. Construção da árvore de renderização (Render Tree):

   • A Render Tree combina o DOM e o CSSOM. Contém apenas os elementos que serão exibidos na página e os estilos correspondentes.
   • Os elementos com a regra CSS display: none; não são incluídos na Render Tree.

5. Layout (Reflow):

   • O navegador calcula as dimensões e posições exatas de cada elemento na página com base na Render Tree. Este processo chama-se Layout ou Reflow.
   • O Layout ocorre na primeira construção da Render Tree e também quando a janela é redimensionada, elementos são adicionados ou removidos, ou seus estilos mudam.

6. Pintura (Painting / Repaint):

   • O navegador pinta cada elemento na tela usando as informações da Render Tree e os resultados do passo de Layout.
   • A pintura também pode ocorrer quando as propriedades visíveis do elemento mudam, como cor, fundo, opacidade, sem alterar a sua geometria (isto chama-se Repaint).

7. Composição:

   • Os elementos que são desenhados podem ser agrupados em diferentes camadas para otimizar o render e a animação.
   • Essas camadas são então combinadas para mostrar a página final na tela.

8. Execução de scripts:

   • Quando o parser HTML alcança a tag <script>, a execução do parsing HTML é suspensa (por padrão), e o navegador descarrega, analisa e executa o código JavaScript.
   • O JavaScript pode modificar o DOM e o CSSOM, o que pode causar passos repetidos de Layout e Pintura.
   • Os atributos async e defer na tag <script> influenciam a ordem e o momento de execução dos scripts, permitindo continuar o parsing do HTML.

Aqui está uma visualização aproximada do fluxo:

Requisição HTTP
↓
Bytes HTML
↓
Parser HTML
→ Parser CSS (em paralelo)
    ↓           ↓
    Árvore DOM  Árvore CSSOM
          ↓
     Árvore de renderização
          ↓
        Layout
          ↓
       Pintura
          ↓
     Composição
          ↓
   Exibição na tela

A execução de JavaScript pode interromper em diferentes etapas, causando passos repetidos:

Parser HTML + tag `<script>`
↓
Pausa na análise HTML
↓
Download do Script
↓
Análise do Script
↓
Executar o Script
↓
(Pode modificar DOM/CSSOM → Disparar Layout/Paint)
↓
Recomeçar a análise HTML

Compreender este processo é importante para otimizar o desempenho das páginas web.