O guia para iniciantes do modelo de objeto CSS (CSSOM)

Muita coisa acontece entre os primeira solicitação HTTP e a Entrega final de uma página da web. A transmissão de dados e o pipeline de renderização do navegador requerem muitas tecnologias diferentes, uma delas é a Modelo de Objetos CSS, ou o CSSOM.

O Modelo de Objeto CSS pega o código CSS e renderiza cada seletor em uma estrutura de árvore para facilitar a análise. Talvez não seja crucial para os desenvolvedores entender completamente esse conceito, mas é um tópico valioso para estudar se você quiser saber mais sobre como os navegadores processam o código em um site de trabalho.

Neste post, vou abordar os fundamentos do modelo de objeto CSS e mostrar como ele funciona.

O que é o CSSOM?

O termo CSS Object Model descreve um mapa de todos os seletores CSS e propriedades relevantes para cada seletor. Esses estilos podem ser elementos raiz ou ter filhos aninhados.

CSSOM é muito semelhante ao DOM em HTML, que significa Document Object Model. Ambos fazem parte do caminho crítico de renderização que é uma série de etapas que devem acontecer renderizar corretamente um site. Todos esses processos acontecem automaticamente, Por trás das cenas.

Então, por que o CSSOM é importante? É o mapa usado pelo navegador para renderizar corretamente estilos CSS em uma página da web. Não há uma maneira fácil de informar a um computador que todos os parágrafos de uma .conteúdo principal div deve ter altura de linha extra.

A solução é o modelo de objeto CSS que mapeia todos os elementos e propriedades do seu código CSS.

O CSSOM torna mais fácil para o navegador estilos de renderização na página. A coisa toda é muito técnica, mas vale a pena entender um pouco sobre o processo, especialmente se você criar sites.

Como funciona

Tanto o DOM quanto o CSSOM são usado extensivamente por todos os navegadores da web para interpretar e renderizar páginas da web. O diagrama abaixo é do guia Conceitos básicos da web do Google Developers e explica como o DOM é renderizado em um navegador da web.

Tanto no DOM quanto no CSSOM, todas as informações são convertido de bytes em mapas digitais que renderizam todos os elementos em um documento da web. O processo funciona da seguinte maneira:

1. O navegador faz o download do HTML para uma página da web.
2. Ao processar o HTML, o analisador pode colidir com um elemento de link referenciando uma folha de estilo externa.
3. Esta folha de estilo CSS é então analisado em um mapa usando as especificações do modelo de objeto CSS.
4. O código resultante pode então ser aplicado a elementos no DOM.

Tudo isso acontece muito rapidamente e ocorre com cada solicitação de página. Este outro diagrama abaixo mostra um exemplo estrutura de árvore do CSSOM.

Observe como algumas propriedades no diagrama têm cores de fonte cinza mais claras. Essas propriedades são herdado do pai. Como o corpo tem um tamanho de fonte específico, todos os elementos dentro do corpo também obtêm esse tamanho de fonte, a menos que ele seja substituído.

Strings HTML e CSS são convertido em tokens que pode então ser entendido como nós pelo navegador. Esses nós são como objetos dentro da estrutura da árvore que define como a página inteira deve ser construída.

O CSSOM e DOM são completamente modelos de dados separados, portanto eles são analisado separadamente um do outro. Mas ambos têm estruturas de árvores semelhantes, e ambos servem ao mesmo propósito: dar ao navegador uma estrutura para renderizar e identificar diferentes elementos na página.

Por que os desenvolvedores da Web devem se importar

Desde toda a renderização acontece no backend, você realmente não precisa se preocupar muito com a árvore CSSOM. Mas pode ser útil entender como funciona.

Uma coisa a lembrar é que o O CSSOM deve estar totalmente carregado antes que a página da Web seja exibida, pois definirá como todos os elementos da página devem se parecer. Se a página for carregada antes do CSSOM, ela aparecerá como primeiro HTML simples, seguida pelos estilos alguns segundos depois.

Os navegadores evitam especificamente isso porque seria confuso para os usuários finais. E é importante notar que o CSSOM não pode ser armazenado em cache; deve ser recriado em cada página.

Arquivos CSS reais podem ser armazenados em cache para carregar os recursos mais rapidamente, mas renderizando uma página no navegador sempre requer a execução do analisador CSSOM. Isso também significa que o JavaScript pode ter um impacto negativo na renderização e no desempenho.

Eu recomendo ler este artigo para saber mais sobre recursos externos de CSS / JS e seus tempos de carregamento.

A melhor maneira de otimizar seu site é criar um cascata natural de recursos que são carregados em conjunto.

É possível manipular o CSSOM usando JavaScript porque é tecnicamente uma API JS. Mas isso não serve muito para uma finalidade em comparação com a manipulação de DOM do JavaScript.

A maior razão para aprender sobre o CSSOM é aprender mais sobre como os sites realmente funcionam.

Há muitas coisas que tomamos como garantidas que mantêm a Internet funcionando sem problemas. Quando você entende um pouco mais sobre todo o processo, você pode visualizar como a coisa toda se encaixa e, espera-se, obter algum reconhecimento pela existência da World Wide Web..

Leitura Adicional

Espero que esta introdução possa dar uma ideia sólida do que é o modelo de objeto CSS e como ele afeta as páginas da Web. Lá não é muito para manipular no CSSOM, por isso difere um pouco do DOM.

No entanto, ainda é uma tecnologia crítica no desenvolvimento web, e deve esclarecer os principais aspectos da renderização do navegador.

Há muitos outros recursos discutindo o CSSOM e como ele funciona. Se você quer saber mais, aqui estão algumas postagens que recomendo:

• Visão geral do modelo de objeto CSS
• Explorando o CSSOM: Criando um analisador de objeto CSS
• O que todo desenvolvedor de front-ends deve saber sobre renderização de páginas da Web