Como é que uma página web é carregada?

O utilizador insere uma URL na barra de endereço do navegador ou clica num link.
Análise da URL: O navegador analisa a URL para determinar o protocolo, domínio, porta e caminho.
Procura do endereço IP: O navegador verifica o cache DNS, depois o cache do sistema operativo, depois o cache do roteador. Se o endereço não for encontrado localmente, envia uma requisição ao servidor DNS para obter o endereço IP do nome de domínio.
Estabelecimento da conexão TCP (Handshake): O navegador estabelece uma conexão TCP com o servidor usando o endereço IP obtido (aperto de mão de três vias: SYN -> SYN-ACK -> ACK).
Envio da requisição HTTP: O navegador envia uma requisição HTTP (normalmente GET) ao servidor indicando o recurso solicitado (caminho), os cabeçalhos (User-Agent, Accept-Encoding, Cookie, etc.) e o corpo da requisição (se houver).
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Processamento da requisição pelo servidor: O servidor recebe a requisição, processa-a (por exemplo, executa scripts do lado do servidor) e gera uma resposta HTTP.
Envio da resposta HTTP: O servidor envia a resposta HTTP de volta ao navegador. A resposta inclui o código de estado (por exemplo, 200 OK), os cabeçalhos (Content-Type, Content-Length, Cache-Control, etc.) e o corpo da resposta (conteúdo do recurso solicitado, por exemplo, ficheiro HTML).
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
Análise do HTML e construção do DOM: O navegador começa a receber o código HTML e a analisá-lo, criando um modelo de objeto do documento (DOM - Document Object Model) na memória. O DOM representa uma árvore de elementos HTML.
Carregamento e processamento de recursos: Durante a análise do HTML, o navegador encontra links para outros recursos (CSS, JavaScript, imagens, fontes, etc.). Para cada recurso, os passos 3-7 são repetidos (procura de IP, conexão TCP (se necessário), requisição/resposta HTTP). O carregamento desses recursos pode ocorrer em paralelo (limitado pelo número de ligações simultâneas).
Construção do CSSOM: O navegador analisa os ficheiros CSS e os blocos <style> em HTML, criando um modelo de objeto CSS (CSSOM - CSS Object Model). O CSSOM representa os estilos aplicáveis aos elementos na página.
Construção da árvore de renderização: O navegador combina o DOM e o CSSOM para construir a árvore de renderização (Render Tree). A árvore de renderização contém apenas os elementos visíveis da página e os seus estilos. Os elementos com display: none não são incluídos.
Layout (Reflow): O navegador calcula a posição e o tamanho exatos de cada elemento no layout, com base na árvore de renderização, nas dimensões da janela de visualização e nos estilos.
Pintura (Repaint): O navegador desenha cada elemento na tela nas posições calculadas e com os estilos aplicados. Isto ocorre em camadas.
Composição: O navegador combina as camadas desenhadas na imagem final que é exibida na tela do utilizador.
Execução de JavaScript: À medida que os scripts são carregados e analisados, o código JavaScript é executado. A execução de JavaScript pode influenciar o DOM e o CSSOM, provocando passos repetidos de Layout e Pintura (Relayout/Repaint).

Etapas-chave para mostrar conteúdo:

DOMContentLoaded: O evento dispara quando o navegador carregou e analisou completamente o documento HTML e construiu a árvore DOM, mas aguarda o carregamento das folhas de estilo, imagens e subframes.
Load: O evento dispara quando toda a página, incluindo imagens, scripts, estilos e outros recursos, está completamente carregada.