O processo de renderização do navegador pode ser dividido nas seguintes etapas:
Analisar HTML : O navegador analisa o documento HTML recebido em uma árvore DOM (Document Object Model). A árvore DOM representa a estrutura de um documento HTML. Cada elemento HTML é representado como um nó e está conectado por meio de um relacionamento pai-filho.
Construir uma árvore DOM : Ao analisar um documento HTML, o navegador construirá uma árvore DOM com base no relacionamento aninhado de tags HTML. Durante esse processo, o navegador analisa tags, atributos e conteúdo de texto e os converte em nós DOM.
Analisar CSS : O navegador analisa a folha de estilo CSS e constrói uma árvore CSSOM (CSS Object Model). A árvore CSSOM representa o relacionamento hierárquico e a definição de estilo dos estilos CSS.
Construa a árvore de renderização : o navegador combina a árvore DOM e a árvore CSSOM para construir a árvore de renderização (também chamada de árvore de layout ou árvore de apresentação). A árvore de renderização contém apenas os elementos que precisam ser exibidos na página, como elementos HTML visíveis e seus estilos.
Layout e desenho : O navegador realiza o layout (também chamado de reflow ou composição tipográfica) de acordo com a árvore de renderização, determinando a posição e o tamanho de cada elemento na página. O navegador então desenha os elementos da árvore de renderização na tela, renderizando a página final. A diferença entre uma árvore DOM e uma árvore de renderização é seu propósito e conteúdo:
Árvore DOM : A árvore DOM é uma representação abstrata do documento HTML. Ela descreve a estrutura do documento HTML. Cada elemento HTML é representado como um nó. A árvore DOM contém todos os elementos da página e seus relacionamentos, incluindo elementos ocultos e elementos que não precisam ser exibidos (como <head>conteúdo sob tags).
Árvore de renderização : A árvore de renderização é uma combinação da árvore DOM e da árvore CSSOM e contém apenas os elementos que precisam ser exibidos na página. Cada elemento na árvore de renderização está associado ao seu estilo, incluindo informações de layout e desenho. A árvore de renderização não contém elementos que não precisam ser exibidos e elementos ocultos. Durante o processo de construção da árvore de renderização, o navegador determinará quais nós precisam ser exibidos na página com base no relacionamento entre a árvore DOM e a árvore CSSOM e calculará seu tamanho geométrico e posição. A árvore de renderização é construída para desenhar a página e fornecer conteúdo visível ao usuário.