Renderização nos Browsers

7 de setembro, 2022 - 1 min

frontend

Um Browser (Navegador) segue alguns passos para renderizar uma página de um endereço da Web.

Resumidamente, Parse do HTML, Parse do CSS, Combinação dos Parses, Layout, Painting e Display.

1. Parse Html

Quando um browser recebe os dados HTML de um servidor, ele converte no DOM Tree.

2. Parse CSS

Os estilos, ou seja, arquivos de CSS, também são carregador e convertidos no CCSOM (CSS Object Model)

3. Combinação e criação da Render Tree

Com os dois conjuntos DOM e CSSOM, o browser os combina e cria a Render Tree. A Render Tree é uma representação visual do DOM.

4. Layout

O conteúdo de cada elemento renderizado da Render Tree será calculado para extrair informações como “posição” e “tamanho” (position e size), o que é chamado de Layout.

5. Painting

Nesse passo a Render Tree é transformada em conteúdo na tela, esse processo é chamado de Painting.

6. Display

E por fim, o browser envia a GPU e disponibiliza o conteúdo na página. O que é chamado de Display.