(Imagens abaixo foram retiradas do Google)
Você já ouviu falar essas palavrinhas CSSOM e DOM? Se você é novato na área e não as conhece, vamos a uma breve explicação. Quando o navegador vai renderizar uma página, ele constrói árvores que são as chamadas DOM e CSSOM, mas para que essa árvores possam ser renderizadas de maneira rápida precisamos fazer nossa parte e entregar um código da maneira mais rápida possível ao navegador.
DOM
O DOM (Document Object Model) nada mais é que o HTML com tags relacionandas em um modelo vinculado com base em uma estrutura de dados em árvore no qual também identifica relacionamentos hierárquicos.
CSSOM
CSSOM ( CSS Object Model) também pode ser baseado em um modelo de hierárquia, mas com algumas poucas diferenças quanto ao carregamento.
Explicação por imagens
DOM
CSSOM
Podemos ter dores de cabeça com CSSOM & DOM?
O navegador demora um certo tempo para fazer uma leitura por completa nas ávores, e a maioria das vezes o maior vilão é um código enorme e mal trabalhado. Mas não se preocupe tenho alguns médicamentos certos para isso, dicas que podem melhorar a performance de seu projeto.
1. Está talvez seja uma das dicas que deve ser levada a sério, 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. Use o atributo class para CSS ao invés de ids, assim pode ser separado a parte lógica da 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 trabalhada de forma que mantenha uma harmonia! Um sistema em (harmonia) só traz resultados bons e saber sobre CSSOM e DOM é o que diferencia os bons desenvolvedores, mas infelizmente muitos ignoram esse fato ou aprendem tarde já que no curso técnicos ou faculdade o desenvolvimento web não é muito aprofundado. Se você ainda não conhecia comece hoje mesmo a se aprofundar e desenvolva projetos diferenciados.
