Como funciona o navegador?

O navegador recebe a URL solicitada, analisa-a e envia uma requisição HTTP ao servidor. O servidor processa a requisição e envia uma resposta contendo HTML, CSS, JavaScript, imagens e outros recursos.

O navegador analisa o documento HTML, criando a árvore DOM (Modelo de Objeto do Documento).

Depois processa o CSS, construindo a árvore CSSOM (Modelo de Objeto CSS).

Ao combinar o DOM e o CSSOM, o navegador cria a árvore de renderização (Render Tree), que contém os elementos a serem exibidos, com seus estilos.

A fase de Layout (ou Reflow) calcula os parâmetros geométricos de cada elemento (posição, tamanhos).

Na fase de Painting (ou Repainting), o navegador desenha os elementos visíveis na tela, usando as informações da Render Tree e do Layout.

Se houver JavaScript, o navegador o carrega e executa. JavaScript pode modificar o DOM e o CSSOM, o que pode causar etapas repetidas de Layout e Painting.

O navegador armazena em cache os recursos obtidos para acelerar os carregamentos subsequentes.