As arvores DOM e CSSOM - ver DOM and CSSOM - são combinadas em uma render tree, que então é usada para computar o layout de cada elemento e servir como um input para o processo de painting que renderiza os pixels na tela.
Render Tree
Render Tree é uma estrutura em forma de árvore, resultante da combinação entre o DOM e o CSSOM.
- Começando pela raiz do DOM, cada elemento visível é examinado
- Alguns nodes não são visíveis (como tags
script,metae etc…). Esses são omitidos já que não refletem a renderização final - Alguns nodes são invisível via CSS e também são omitidos. No exemplo acima a tag
spanestá comdisplay: none;. OBS:visibility: hiddené diferente dedisplay: none;, no primeiro, o elemento está invisível mas ainda ocupa espaço no layout, pois é renderizado vazio, já o segundo remove completamente o elemento da render tree, ou seja, o elemento não faz parte do layout
- Pra cada node visível, as propriedades e regras correspondentes na CSSOM são aplicadas
- Os nodes visíveis, seu conteúdo e estilos são emitidos
O resultado desse processo é uma estrutura em árvore com o conteúdo e estilos dos elementos visíveis. A partir daqui o próximo estágio é o layout, também conhecido como reflow.
Layout
Até aqui a posição e tamanho exato dos elementos na viewport não foi calculada, e é justamente o papel do layout stage, ou reflow.
Para determinar a posição e tamanho dos elementos, o navegador recebe a render tree e a examina desde a raiz.
O resultado final desse processo é uma box model, que captura a exata posição e tamanho de cada elemento na viewport. Todas as medidas relativas são convertidas para pixels.
Painting
Também conhecido como rasterizing ou repainting, é esse o processo responsável por exibir e renderizar a render tree na tela. Quando o layout está completo, o browser dispara os eventos paint setup e paint.
Nesse momento o HTML já está visível na tela, e o tempo para completar esses passos depende de alguns fatores como o tamanho do documento, os estilos e o tamanho do dispositivo.
Um resumo de todos os passos que o navegador efetua:
- Processa o HTML e gera a árvore DOM
- Processa o CSSS e gera a árvore CSSOM
- Combina a DOM e CSSOM em uma render tree
- Executa o layout stage na render tree para computar a geometria de cada node
- Renderiza os nodes na tela
Sempre que a DOM ou CSSOM são modificadas, esse processo é repetido para determinar quais pixels precisam ser atualizados na tela. São essas etapas que determinam o critical rendering path.
Optimizing the Critical Rendering Path
Otimizar o CRP é o processo de minimizar o tempo total gasto para executar os steps de 1 a 5 da sequência acima, para que o conteúdo seja renderizado o mais rápido possível, e também reduzir o tempo necessário para atualizar os pixels depois da renderização inicial.
Podemos incrementar a velocidade em que a página é exibida priorizando quais recursos devem ser carregados, controlando a ordem de carregamento e reduzindo o tamanho dos arquivos. Outras abordagens podem ser otimizar o carregamento do CSS, minificar e comprimir os arquivos e tornar o JS assíncrono.