Publicado em 31 de março de 2014
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. A otimização de cada uma dessas etapas é fundamental para alcançar o desempenho ideal de renderização.
Na seção anterior sobre a construção do modelo de objeto, criamos as árvores DOM e CSSOM com base na entrada HTML e CSS. No entanto, ambas são objetos independentes que capturam diferentes aspectos do documento: um descreve o conteúdo e o outro descreve as regras de estilo que precisam ser aplicadas ao documento. Como mesclamos os dois e fazemos com 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 recebe 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 DOM visível na página e todas as informações de estilo do CSSOM para cada nó.
Para construir a árvore de renderização, o navegador faz o seguinte:
Começando na raiz da árvore do DOM, percorra cada nó visível.
- Alguns nós não estão visíveis (por exemplo, tags de script, meta tags etc.) e são omitidos porque não são refletidos na saída renderizada.
- Alguns nós são ocultos usando CSS e também são omitidos da árvore de renderização. Por exemplo, o nó de span no exemplo acima está ausente da árvore de renderização porque temos uma regra explícita que define a propriedade "display: none" nele.
Para cada nó visível, encontre as regras CSSOM correspondentes adequadas e aplique-as.
Emita nós visíveis com conteúdo e estilos calculados.
A saída final é uma árvore de renderização que contém o conteúdo e as informações de estilo de todo o conteúdo visível na tela. Com a árvore de renderização no lugar, podemos prosseguir para a fase de "layout".
Até agora, calculamos quais nós devem estar visíveis e os estilos calculados, mas não calculamos a posição e o tamanho exatos deles na janela de visualização do dispositivo. Essa é a fase 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 percorre. Por exemplo,
<!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>
Confira este exemplo de HTML renderizado como uma página da Web.
O <body> do exemplo anterior contém dois <div>s aninhados: o primeiro (pai) <div> 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 width 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 com precisão a posição e o tamanho exatos de cada elemento na janela de visualização: todas as medições relativas são convertidas em pixels absolutos na tela.
Por fim, agora que sabemos quais nós estão visíveis e os estilos e a geometria calculados, podemos transmitir essas informações para a fase final, que converte cada nó na árvore de renderização em pixels reais na tela. Essa etapa é geralmente chamada de "pintura" ou "rasterização".
Isso pode levar algum tempo porque o navegador precisa fazer bastante trabalho. No entanto, o Chrome DevTools pode fornecer algumas informações sobre todas as três fases descritas anteriormente. Examine a fase de layout do nosso exemplo original "Hello World":
- O evento "Layout" captura a construção, a posição e o cálculo do tamanho da árvore de renderização na linha do tempo.
- Quando o layout é concluído, o navegador emite eventos "Configuração de pintura" e "Pintura", que convertem a árvore de renderização em pixels na tela.
O tempo necessário para realizar 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 ele está sendo executado: quanto maior o documento, mais trabalho o navegador tem; quanto mais complicados os estilos, mais tempo é gasto na pintura (por exemplo, uma cor sólida é "barata" para pintar, enquanto uma sombra projetada é "cara" para calcular e renderizar).
A página fica visível na janela de visualização:
Confira um resumo rápido das etapas do navegador:
- Processar a marcação HTML e criar a árvore do DOM.
- Processar a marcação CSS e criar a árvore CSSOM.
- Combine 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.
A página de demonstração pode parecer básica, mas exige bastante trabalho do navegador. Se o DOM ou o CSSOM forem modificados, será necessário repetir o processo para descobrir quais pixels precisam ser renderizados novamente na tela.
Otimizar o caminho de renderização crítico é o processo de minimizar o tempo total gasto na execução das etapas de 1 a 5 na 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.