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

Análise de URL: O navegador analisa a URL para determinar o protocolo, o nome de domínio e o caminho para o recurso.
Pedido DNS: Se o nome de domínio ainda não estiver em cache local, o navegador envia um pedido DNS para obter o endereço IP do servidor.
Estabelecimento de conexão TCP: O navegador estabelece uma conexão TCP com o servidor usando o endereço IP obtido.
Pedido HTTP: O navegador envia um pedido HTTP ao servidor, solicitando a página web desejada.
Receção da resposta HTTP: O servidor processa o pedido e envia uma resposta HTTP contendo o código HTML, CSS, JavaScript e outros recursos.
Análise de HTML: O navegador começa a analisar o HTML recebido, criando uma árvore DOM (Document Object Model).
Carregamento de recursos: Durante a análise do HTML, o navegador detecta links para outros recursos (CSS, JS, imagens) e começa a carregá-los, muitas vezes em paralelo.
Análise de CSS: O navegador analisa o CSS, criando uma árvore CSSOM (CSS Object Model).
Construção da árvore de renderização (Render Tree): Combinando DOM e CSSOM, o navegador cria uma árvore de renderização que contém apenas os nós visíveis e seus estilos.
Layout: O navegador calcula as dimensões geométricas e a posição de cada elemento na página.
Pintura: O navegador pinta pixels para cada elemento na tela, com base na árvore de renderização e nos resultados do layout.
Composição: Se a página contiver camadas (por exemplo, devido a propriedades CSS como transform ou opacity), o navegador combina essas camadas para exibir a imagem final.
Processamento de JavaScript: Ao detectar tags <script> ou scripts inline, o navegador analisa, compila e executa JavaScript. JavaScript pode modificar o DOM, CSSOM e influenciar as etapas de layout e pintura, podendo causar a repetição dessas etapas.

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