Entendendo CSSOM e sua importância na renderização

visualizações Publicado em: 26/02/2018 Quero ser um autor

Introdução

Você já ouviu falar em CSSOM?
Se não, nessa matéria daremos uma breve explicação do que seja CSSOM.
Para renderizar uma página o navegador primeiro constrói, o que chamamos em linguagem de desenvolvimento "árvores".

Tais árvores, a exemplo das conhecidas árvores genealogicas, estabelecem as relações entre as entidades envolvidas na renderização e são denominadas DOM ( Document Object Model ) e CSSOM ( CSS Object Model ).

Uma das condicionantes da velocidade de renderização (performance) de um documento web é que a construção da árvore seja a mais rápida possível e cabe a nós desenvolvedores fazer nossa parte desenvolvendo um código limpo e otimizado para que o navegador construa a árvore rapidamente.

DOM 

O DOM é construido com base na marcação HTML segundo um modelo que mostra a estrutura de vinculação e relacionamentos hierárquicos entre os elementos da marcação.

CSSOM

O CSSOM segue o mesmo modelo do DOM e é construido com base nas CSS.

Explicação por imagens 

DOM

Imagem: Google Developers

CSSOM

Imagem: Google Developers

Podemos ter dores de cabeça com CSSOM & DOM?

O navegador demanda um determinado tempo para interpretar a marcação HTML e as folhas de estilos e construir as árvores para a renderização.

O tempo demandado é função direta da facilidade com que o navegador "lê e interpreta" a marcação HTML e as CSS. Assim sendo, na maioria dos casos o maior vilão dessa história acaba sendo um código confuso e mal escrito. Mas, não se preocupe, vou te passar algumas dicas que podem melhorar a performance de seu projeto.

1. Não misture HTML e CSS! Cada um foi criado com seu objetivo: HTML marcação e CSS estilo. Deixe cada um no seu quadrado.
2. Simplifique e otimize seletores CSS.
3. Prefira o uso do atributo class ao atributo id, assim pode ser separada a parte lógica do estilo e claro, flexibilidade. 
4. Minifique seus códigos CSS e HTML (Não se esqueça de fazer backup de uma opção para suporte) 

Conclusão

Desenvolver uma página web envolve trabalho. A interface deve ser projetada de forma harmônica e integrada. Um sistema bem projetado traz resultados bons e conhecer o CSSOM e o DOM é indespensável para o planejamento da interface. Infelizmente muitos ignoram esse fato e pagam um preço alto por isso. Se você ainda não conhecia comece hoje mesmo a se aprofundar no assunto e desenvolva projetos diferenciados.