Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura
Veja o que o navegador faz com os bytes de HTML e CSS: cria o DOM e o CSSOM, calcula o layout e pinta os pixels.
Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Dos bytes aos pixels
Quando o navegador recebe bytes de HTML do servidor, um processo com várias etapas os transforma nos pixels que você vê na tela. Conhecer esse fluxo ajuda você a otimizar o desempenho e entender o que causa falhas visuais.
Etapa 1 — Analisando HTML: construindo o DOM
O analisador de HTML do navegador lê o fluxo de bytes e constrói o Modelo de Objetos do Documento (DOM) — uma árvore de nós que representa cada elemento HTML, nó de texto e comentário do documento.
<!-- This HTML... -->
<div>
<p>Hello</p>
</div>
// ...becomes a DOM tree:
// Document
// └── html
// └── body
// └── div
// └── p
// └── 'Hello'Etapa 2 — Analisando CSS: construindo o CSSOM
Simultaneamente, os bytes de CSS são analisados para formar o Modelo de Objetos CSS (CSSOM) — uma árvore de regras de estilo. O CSS bloqueia a renderização: o navegador não desenha pixels até calcular os estilos do conteúdo visível.
Etapa 3 — A árvore de renderização
O navegador combina o DOM e o CSSOM na árvore de renderização. Somente nós visíveis são incluídos — elementos com display:none são excluídos. Cada nó da árvore de renderização contém o estilo calculado com o qual será desenhado.
Etapa 4 — Disposição (refluxo)
Disposição calcula a posição e o tamanho exatos de cada nó da árvore de renderização usando o modelo de caixas e a largura da área de visualização. Isso também é chamado de refluxo. A disposição é dispendiosa; evite provocá-la repetidamente no JavaScript.
Etapa 5 — Pintura
Pintura converte a disposição em pixels reais na tela. O navegador desenha planos de fundo, bordas, texto e imagens camada por camada. Alguns elementos criam suas próprias camadas de composição para uma renderização acelerada pela GPU.
Etapa 6 — Composição
O compositor do navegador combina as camadas pintadas no quadro final e o envia para a tela. Usar transform e opacity em animações permite que o compositor as execute na GPU, ignorando completamente a disposição e a pintura.
O que bloqueia a renderização?
CSS no <head> bloqueia a renderização. JavaScript, por padrão, bloqueia tanto o analisador quanto a renderização. Use defer nas tags de script para analisar o JS depois do HTML sem bloquear a renderização.
<script src="app.js" defer></script>Caminho crítico de renderização
O caminho crítico de renderização é a sequência desde o recebimento dos bytes de HTML até a exibição do primeiro pixel. Otimizá-lo significa minimizar a quantidade e o tamanho dos recursos que bloqueiam a renderização e adiar JS e CSS não críticos.
Refluxo vs. repintura
Alterar propriedades de disposição (width, margin, position) provoca um refluxo + repintura. Alterar propriedades exclusivamente visuais (color, background) provoca apenas uma repintura. Alterar transform/opacity provoca somente composição. Prefira a operação mais econômica.
DevTools: veja a linha do tempo da pintura
Nas Chrome DevTools, abra o painel Desempenho, grave o carregamento de uma página e examine a cascata. Você verá os eventos verdes de Pintura e poderá identificar quais elementos causam disposições dispendiosas.
Verificação rápida
Qual etapa calcula o tamanho e a posição exatos de cada elemento da página?
Recapitulação: o fluxo de renderização
HTML → DOM → CSSOM → árvore de renderização → disposição → pintura → composição. Cada etapa alimenta a seguinte. Otimizar o caminho crítico de renderização significa encurtar esse fluxo para que o primeiro conteúdo visível apareça o mais rápido possível.
Perguntas Frequentes
A aula “Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura” é grátis?
Sim — o texto completo de “Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura”?
Veja o que o navegador faz com os bytes de HTML e CSS: cria o DOM e o CSSOM, calcula o layout e pinta os pixels. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Navegadores, DNS e HTTP: o ciclo de vida de uma solicitação
- HTML, CSS e JavaScript: a função de cada camada
- Como uma página é renderizada: análise, DOM, CSSOM, layout e pintura
- Ferramentas de desenvolvedor: abrindo e usando o DevTools