As árvores CSSOM e DOM são combinadas em uma árvore de renderização, que é usada para calcular o layout de cada elemento visível e serve como entrada para o processo de pintura que renderiza os pixels na tela. Otimizar cada uma dessas etapas é fundamental para alcançar o desempenho de renderização ideal.
Na seção anterior sobre como construir o modelo de objetos, criamos as árvores do DOM e do CSSOM com base nas entradas do HTML e do CSS. No entanto, ambos são objetos independentes que capturam aspectos diferentes do documento: um descreve o conteúdo e o outro descreve as regras de estilo que precisam ser aplicadas ao documento. Como podemos mesclar os dois para que o navegador renderize pixels na tela?
Resumo
- As árvores DOM e CSSOM se combinam para formar a árvore de renderização.
- A árvore de renderização contém apenas os nós necessários para renderizar a página.
- O layout calcula a posição e o tamanho exatos de cada objeto.
- A última etapa é a pintura, que usa a árvore de renderização final e renderiza os pixels na tela.
Primeiro, o navegador combina o DOM e o CSSOM em uma "árvore de renderização", que captura todo o conteúdo visível do DOM na página e todas as informações de estilo do CSSOM de cada nó.
Para construir a árvore de renderização, o navegador faz o seguinte:
A partir da raiz da árvore DOM, atravesse cada nó visível.
- Alguns nós não são visíveis (por exemplo, tags script, metatags e assim por diante) e são omitidos porque não são refletidos na saída renderizada.
- Alguns nós são ocultados por CSS e também omitidos da árvore de renderização. Por exemplo, o nó de período (no exemplo acima) está ausente da árvore de renderização porque temos uma regra explícita que define a propriedade "display: none" nele.
Encontre e aplique as regras do CSSOM correspondentes adequadas para cada nó visível.
Emite nós visíveis com conteúdo e os estilos calculados.
A saída final é uma árvore de renderização que contém as informações de conteúdo e estilo de todo o conteúdo visível na tela. Com a árvore de renderização pronta, podemos prosseguir para a fase de layout.
Até agora, calculamos quais nós deveriam estar visíveis e os estilos calculados, mas não calculamos a posição e o tamanho exatos deles dentro da janela de visualização do dispositivo. Essa é a etapa de "layout", também conhecida como "reflow".
Para descobrir o tamanho e a posição exatos de cada objeto na página, o navegador começa na raiz da árvore de renderização e a atravessa. Vamos analisar um exemplo simples e prático:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
O corpo da página acima contém dois divs aninhados: o primeiro div (pai) define o tamanho de exibição do nó como 50% da largura da janela de visualização, e o segundo div, contido pelo pai, define a largura como 50% do pai, ou seja, 25% da largura da janela de visualização.
A saída do processo de layout é um "modelo de caixa", que captura precisamente a posição e o tamanho exatos de cada elemento na janela de visualização: todas as medidas relativas são convertidas em pixels absolutos na tela.
Por fim, agora que sabemos quais nós são visíveis, seus estilos e geometria calculados, podemos passar essas informações para o estágio final, que converte cada nó da árvore de renderização em pixels reais na tela. Essa etapa é frequentemente chamada de “pintura” ou “rasterização”.
Isso pode levar algum tempo, porque o navegador precisa trabalhar bastante. No entanto, o Chrome DevTools pode fornecer algumas informações sobre as três fases descritas acima. Vamos examinar o estágio de layout do nosso exemplo original "hello world":
- O evento "Layout" captura a construção, a posição e o cálculo de tamanho da árvore de renderização na linha do tempo.
- Quando o layout é concluído, o navegador emite eventos "Paint Setup" e "Paint", que convertem a árvore de renderização em pixels na tela.
O tempo necessário para a construção, o layout e a pintura da árvore de renderização varia de acordo com o tamanho do documento, os estilos aplicados e o dispositivo em que está sendo executado: quanto maior o documento, mais trabalho o navegador terá; quanto mais complicados são os estilos, mais tempo leva para pintar também (por exemplo, uma cor sólida é "barato" para pintar, enquanto uma sombra projetada é "cara" para computar e renderizar).
Finalmente, a página está visível na janela de visualização:
Vamos recapitular as etapas do navegador:
- Processar a marcação HTML e criar a árvore do DOM.
- Processe a marcação CSS e crie a árvore do CSSOM.
- Combinar o DOM e o CSSOM em uma árvore de renderização.
- Execute o layout na árvore de renderização para calcular a geometria de cada nó.
- Pinte os nós individuais na tela.
Nossa página de demonstração pode parecer simples, mas exige bastante trabalho. Se o DOM ou o CSSOM forem modificados, você teria que repetir o processo para descobrir quais pixels teriam que ser renderizados novamente na tela.
A otimização do caminho crítico de renderização é o processo de minimizar o tempo total gasto nas etapas de 1 a 5 da sequência acima. Isso renderiza o conteúdo na tela o mais rápido possível e também reduz o tempo entre as atualizações da tela após a renderização inicial, ou seja, alcança taxas de atualização mais altas para conteúdo interativo.