Construção, layout e pintura da árvore de renderização

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ó.

O DOM e o CSSOM são combinados para criar a árvore de renderização

Para construir a árvore de renderização, o navegador faz o seguinte:

  1. 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.
  2. Encontre e aplique as regras do CSSOM correspondentes adequadas para cada nó visível.

  3. 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>

Faça um teste

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.

Calcular informações de layout

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":

Medir o layout no DevTools

  • 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:

Página &quot;Hello World&quot; renderizada

Vamos recapitular as etapas do navegador:

  1. Processar a marcação HTML e criar a árvore do DOM.
  2. Processe a marcação CSS e crie a árvore do CSSOM.
  3. Combinar o DOM e o CSSOM em uma árvore de renderização.
  4. Execute o layout na árvore de renderização para calcular a geometria de cada nó.
  5. 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.

Feedback