Seletores CSS3 (ex: ) são incrivelmente impressionante para nos ajudar a direcionar os elementos que queremos, mantendo a nossa marcação limpa e semântica. Mas o fato é que esses seletores extravagantes utilizam muito mais recursos.
Ele mapeia as regras em sua folha de estilo para as coisas na página que necessitam de estilos. O CSSOM leva muitos passos complicados de fazer isso, mas a função final do CSSOM é mapear estilos para os lugares que esses estilos precisam ir.
Saiba que o CSSOM bloqueia a renderização de tudo Saiba que o CSSOM é construído toda vez que você carregar uma nova página. Saiba que há uma relação entre o carregamento do CSS da sua página e o carregamento do JS da sua página
é uma tarefa do navegador que calcula o posicionamento e dimensão de todos os elementos da sua página. A cada reflow, todos os elementos tem o tamanho e posição calculadas, por isso que um excesso de reflow causa mais processamento e consequentemente páginas com uma renderização mais demorada.
Repaint é quando acontece uma alteração visual no elemento (cor, background) que não altera suas dimensões (margem, padding, largura ou altura). O repaint é menos custoso em termos de processamento.
inserir, remover ou atualizar um elemento no DOM modificar o conteúdo da página, por exemplo, o texto em um input Mover um elemento DOM Animar um elemento DOM * fazer medições de um elemento como offsetHeight ou getComputedStyle mudar um estilo CSS mudar o className de um elemento adicionar ou remover uma folha de estilo redimensionar a janela ou fazer scroll