Desenvolvimento do modelo de objeto

Para conseguir renderizar a página, o navegador 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.

TL;DR

  • Bytes → caracteres → tokens → nós → modelos de objeto.
  • A marcação HTML é transformada em um Document Object Model (DOM). A marcação CSS é transformada em um CSS Object Model (CSSOM).
  • DOM e CSSOM são estruturas de dados independentes.
  • A "Timeline" do Chrome DevTools permite registrar e avaliar os recursos usados para a criação e o processamento do DOM e do CSSOM.

Document Object Model (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>

Experimente

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?

Processo de construção do DOM

  1. Conversão: O navegador lê os bytes brutos do HTML fora do disco ou da rede e converte-os em caracteres individuais com base na codificação especificada do arquivo (por exemplo, UTF-8).
  2. Tokenização: O navegador converte sequências de caracteres em tokens distintos — como especificado pelo padrão HTML5 do W3C. Por exemplo, "<html>", "<body>" — e outras strings entre sinais de "maior que" e "menor que". Cada token tem um significado especial e seu próprio conjunto de regras.
  3. Regras: Os tokens emitidos são convertidos em "objetos", que definem suas propriedades e regras.
  4. Criação do DOM: Por fim, como a marcação HTML cria relacionamentos entre tags diferentes (algumas tags estão contidas dentro de tags), os objetos criados são vinculados em uma estrutura de dados em árvore que também identifica os relacionamentos hierárquicos definidos na marcação original: o objeto HTML é primário ao objeto body, o objeto body é primário ao objeto paragraph, e assim por diante.

árvore do DOM

O resultado final de todo esse processo é o Document Object Model, ou "DOM", da nossa página simples, que é usado pelo navegador para todos os demais processamentos da página.

Sempre que o navegador processa marcação HTML, ele precisa executar todas as etapas acima: converter bytes em caracteres, identificar tokens, converter tokens em nós e criar a árvore do DOM. Esse processo todo pode demorar um pouco, particularmente se houver uma grande quantidade de HTML a processar.

Rastrear a construção do DOM no DevTools

Observação: Presumimos que você conheça o básico do Chrome DevTools. Ou seja, você sabe como capturar uma cascata de rede ou registrar uma linha do tempo. Caso precise de um resumo para recapitular, consulte a documentação do Chrome DevTools ou, se ainda não conhece bem o DevTools, faça o curso Discover DevTools."

Se você abrir o Chrome DevTools e registrar uma linha do tempo durante o carregamento da página, verá o tempo realmente necessário para se executar essa etapa — no exemplo acima, foram necessários cerca de 5 ms para converter um bloco de HTML em uma árvore do DOM. Para páginas maiores, esse processo pode ser bem mais demorado. Ao criar animações fluidas, essa parte pode facilmente se tornar um gargalo se o navegador tiver que processar muito HTML.

A árvore do DOM captura as propriedades e os relacionamentos da marcação do documento, mas não nos diz nada sobre a aparência do elemento quando renderizado. Isso é responsabilidade do CSSOM.

CSS Object Model (CSSOM)

Quando o navegador estava construindo o DOM da nossa página simples, encontrou uma tag 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, o navegador envia imediatamente uma solicitação desse 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 os estilos diretamente na marcação HTML (embutida), mas a manutenção do CSS independente do HTML nos permite tratar conteúdo e design como assuntos separados. Os designers podem trabalhar no CSS, os desenvolvedores podem se concentrar no HTML, e assim por diante.

Assim como no HTML, precisamos converter as regras CSS recebidas em algo que o navegador consiga entender e usar. Portanto, repetimos o processo do HTML, mas para o CSS dessa vez:

Etapas de construção do CSSOM

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", ou, abreviando, CSSOM:

Árvore do CSSOM

Por que o CSSOM tem uma estrutura de árvore? Para calcular o conjunto final de estilos de um objeto da página, o navegador começa com a regra mais geral aplicável a esse nó (por exemplo, se é secundário a um elemento "body", todos os estilos de "body" se aplicam). Em seguida, refina com recursos os estilos calculados aplicando regras mais específicas, ou seja, as regras são aplicadas em "cascata de cima para baixo".

Para sermos mais claros, vamos considerar a árvore do CSSOM acima. Todo o texto dentro da tag span colocado dentro do elemento "body" tem fonte de tamanho 16 pixels na cor vermelha. A instrução de tamanho de fonte é aplicada em cascata de "body" a "span". No entanto, se uma tag span for filha de uma tag paragraph (P), seu conteúdo não será exibido.

Além disso, observe que a árvore acima não é a árvore do CSSOM completa e mostra apenas os estilos que decidimos modificar na nossa folha de estilo. Todo navegador oferece um conjunto padrão de estilos, também denominado "estilos de user-agent", que é o que vemos quando não fornecemos um próprio conjunto de estilos próprio. Nossos estilos simplesmente substituem esses padrões (por exemplo, estilos padrão do IE).

Para descobrir quanto tempo o processamento do CSS leva, registre uma linha do tempo no DevTools e procure pelo evento "Recalculate Style". Ao contrário da análise do DOM, a linha do tempo não mostra uma entrada "Parse CSS" separada. Em vez disso, captura a análise e a construção da árvore do CSSOM, além do cálculo recursivo dos estilos calculados nesse único evento.

Rastrear a construção do CSSOM no DevTools

Nossa folha de estilo comum leva cerca de 0,6 ms para ser processada e afeta oito elementos da página — não muito, mas, mais uma vez, nada que possa ser ignorado. Porém, de onde vieram os oito elementos? O CSSOM e o DOM são estruturas de dados independentes. O que 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 entre si.