Antes que o navegador possa renderizar a página, ele precisa construir as árvores do DOM e do CSSOM. Como resultado, precisamos garantir a entrega mais rápida possível do HTML e do CSS ao navegador.
Resumo
- Bytes → caracteres → tokens → nós → modelo de objeto.
- A marcação HTML é transformada em um Document Object Model (DOM), e a marcação CSS é transformada em um CSS Object Model (CSSOM).
- DOM e CSSOM são estruturas de dados independentes.
- O painel "Performance" do Chrome DevTools permite capturar e inspecionar os custos de construção e processamento do DOM e do CSSOM.
Modelo de objeto de documentos (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Vamos começar com o caso mais simples possível: uma página HTML simples com texto e uma única imagem. Como o navegador processa essa página?
- Conversão:o navegador lê os bytes brutos de HTML no disco ou na rede e os converte em caracteres individuais com base na codificação especificada do arquivo (por exemplo, UTF-8).
- Tokenização:o navegador converte strings de caracteres em tokens distintos, conforme especificado pelo padrão HTML5 do W3C, por exemplo, "<html>", "<body>" e outras strings entre colchetes angulares. Cada token tem um significado especial e um conjunto de regras próprio.
- Lexing:os tokens emitidos são convertidos em "objetos", que definem as propriedades e regras deles.
- Construção do DOM:finalmente, como a marcação HTML define relacionamentos entre tags diferentes (algumas tags estão contidas em outras), os objetos criados são vinculados em uma estrutura de dados de árvore que também captura as relações pai-filho definidas na marcação original: o objeto HTML é pai do objeto body, o body é pai do objeto paragraph e assim por diante.
O resultado final desse processo é o Modelo de objeto de documentos (DOM, na sigla em inglês) da nossa página simples, que o navegador usa para o processamento seguinte da página.
Toda vez que o navegador processa uma marcação HTML, ele passa por todas as etapas acima: converter bytes em caracteres, identificar tokens, converter tokens em nós e criar a árvore do DOM. Todo esse processo pode levar algum tempo, especialmente se tivermos uma grande quantidade de HTML para processar.
Se você abrir o Chrome DevTools e gravar uma linha do tempo enquanto a página é carregada, poderá ver o tempo real necessário para executar essa etapa. No exemplo acima, levou cerca de 5 ms para converter um bloco de HTML em uma árvore do DOM. Em uma página maior, esse processo pode demorar muito mais. Ao criar animações suaves, isso pode facilmente se tornar um gargalo se o navegador tiver que processar grandes quantidades de HTML.
A árvore do DOM captura as propriedades e os relacionamentos da marcação do documento, mas não informa como o elemento ficará quando renderizado. Essa é responsabilidade do CSSOM.
Modelo de objeto CSS (CSSOM)
Enquanto o navegador estava construindo o DOM da nossa página simples, ele encontrou uma tag de link na seção de cabeçalho do documento que referenciava uma folha de estilo CSS externa: style.css. Prevendo que esse recurso será necessário para renderizar a
página, ele envia imediatamente uma solicitação para esse recurso, que retorna
com o seguinte conteúdo:
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
Poderíamos ter declarado nossos estilos diretamente na marcação HTML (in-line), mas manter nosso CSS independente do HTML nos permite tratar conteúdo e design como preocupações separadas: designers podem trabalhar em CSS, desenvolvedores podem se concentrar em HTML e assim por diante.
Assim como no HTML, precisamos converter as regras de CSS recebidas em algo que o navegador possa entender e usar. Portanto, repetimos o processo do HTML, mas para o CSS em vez do HTML:
Os bytes do CSS são convertidos em caracteres, depois em tokens, nós e, por fim, são vinculados em uma estrutura de árvore conhecida como "Modelo de objeto CSS" (CSSOM):
Por que o CSSOM tem uma estrutura de árvore? Ao calcular o conjunto final de estilos para qualquer objeto na página, o navegador começa com a regra mais geral aplicável a esse nó (por exemplo, se for filha de um elemento do corpo, todos os estilos de body se aplicam) e, em seguida, refina recursivamente os estilos computados aplicando regras mais específicas, ou seja, as regras "são em cascata".
Para deixar isso mais concreto, considere a árvore do CSSOM acima. Qualquer texto contido
na tag <span> que seja colocado no elemento do corpo tem um tamanho de
fonte de 16 pixels e texto em vermelho. A diretiva font-size é aplicada
em cascata da body para a span. No entanto, se uma tag span for filha de uma tag de parágrafo (p), o conteúdo dela não será exibido.
Além disso, a árvore acima não é a árvore do CSSOM completa e mostra apenas os estilos que decidimos substituir na nossa folha de estilo. Todo navegador oferece um conjunto padrão de estilos, também conhecido como "estilos de user agent", que é o que vemos quando não fornecemos um estilo próprio. Nossos estilos simplesmente modificam esses padrões.
Para descobrir quanto tempo o processamento de CSS leva, grave uma linha do tempo no DevTools e procure o evento "Recalcular estilo": ao contrário da análise do DOM, a linha do tempo não mostra uma entrada "Analisar CSS" separada. Em vez disso, captura a análise e a construção da árvore do CSSOM, além do cálculo recursivo de estilos calculados nesse evento.
Nossa folha de estilo trivial leva cerca de 0,6 ms para ser processada e afeta oito elementos na página.Não muito, mas, mais uma vez, não é sem custo financeiro. No entanto, de onde vieram os oito elementos? CSSOM e DOM são estruturas de dados independentes. Acontece que o navegador está escondendo uma etapa importante. Em seguida, vamos falar sobre a árvore de renderização que vincula o DOM e o CSSOM.