Publicado em 31 de março de 2014
Antes que o navegador possa renderizar a página, ele precisa criar o DOM e árvores de 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); A marcação CSS é em um modelo de objetos CSS (CSSOM).
- DOM e CSSOM são estruturas de dados independentes.
- O painel "Performance" do Chrome DevTools permite capturar e inspecionar a construção e os custos de 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>
Comece 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 do HTML do disco ou rede e os converte em caracteres individuais com base em codificação 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. Cada token tem um significado especial e o próprio conjunto de regras. - Lexing:os tokens emitidos são convertidos em "objetos". que definem as propriedades e regras deles.
- Construção do DOM: por fim, como a marcação HTML define relações, entre tags diferentes (algumas estão contidas em outras tags) o 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 HTML objeto é pai do objeto body, o body é pai do paragraph, até que toda a representação do documento seja criada.
O resultado final de todo esse processo é o Document Object Model (DOM) da nossa página simples, que é usado pelo navegador para todo o processamento subsequente da página.
Sempre que o navegador processa a marcação HTML, ele passa por todas as etapas definidas anteriormente: converter bytes em caracteres, identificar tokens, converter de tokens para nós e construa a árvore do DOM. Todo o processo pode levar algum tempo, especialmente se tivermos muito HTML para processar.
Se você abrir o Chrome DevTools e gravar uma linha do tempo enquanto a página está carregada, é possível conferir o tempo real necessário para realizar essa etapa. No exemplo anterior, demorou cerca de 5 ms para converter um bloco de HTML em uma árvore do DOM. Para uma página maior, esse processo pode ser bem mais demorado. Ao criar animações suaves, isso pode 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 nos diz como o elemento vai ficar quando renderizado. Isso é responsabilidade do CSSOM.
Modelo de objetos do CSS (CSSOM)
Enquanto o navegador estava construindo o DOM da nossa página básica, encontrou
um elemento <link> no <head> do documento que referenciava uma folha de estilo CSS
externa: style.css. Prevendo que esse recurso será necessário para renderizar a
página, o navegador envia imediatamente uma solicitação para esse recurso, que é devolvida
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 o conteúdo e o design como questões separadas: designers podem trabalhar em CSS, desenvolvedores podem se concentrar em HTML, além de outras preocupações.
Assim como com HTML, precisamos converter as regras de CSS recebidas em algo que que o navegador consegue entender e usar. Portanto, repetimos o processo do HTML, mas para o CSS dessa vez:
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 "CSS Object Model" (CSSOM):
Por que o CSSOM tem uma estrutura de árvore? Ao computar 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 ele for filho de um elemento do corpo, todos os estilos do corpo serão aplicados) e, em seguida, refina recursivamente os estilos computados aplicando regras mais específicas, ou seja, as regras "em cascata".
Para sermos mais claros, vamos considerar a árvore do CSSOM descrita anteriormente. Todo o texto
contido na tag <span> colocado dentro do elemento body tem um
tamanho de fonte de 16 pixels e texto vermelho. A diretiva font-size é aplicada em cascata
do body ao span. No entanto, se um span for filho de uma
tag de parágrafo (p), o conteúdo dela não será exibido.
Além disso, observe que a árvore descrita anteriormente não é a árvore do CSSOM completa e mostra apenas os estilos que decidimos substituir em nossa folha de estilo. Todos os navegadores fornece um conjunto padrão de estilos também conhecido como "estilos de user agent". É isso que que vemos quando não fornecemos nenhum elemento próprio, e nossos estilos substituem essas padrão.
Para descobrir quanto tempo leva o processamento de CSS, você pode registrar uma linha do tempo em DevTools e procure por "Recalcular estilo" evento: ao contrário da análise do DOM, o a linha do tempo não mostra um "Parse CSS" separado entrada e, em vez disso, captura análise e a construção da árvore de CSSOM, além do cálculo recursivo de computados neste evento.
O processamento dos estilos triviais leva cerca de 0,6 ms e afeta oito elementos da página. Não muito, mas, novamente, não sem custo financeiro. No entanto, onde são os oito elementos? O CSSOM e o DOM são estruturas de dados independentes. Acontece que o navegador está escondendo uma etapa importante. Em seguida, árvore de renderização vai ser abordado, vincula o DOM e o CSSOM.