Performance CSS

Palestra apresentada no CSSDay de maceió!

Transcript

3. 1) Seletores CSS 2) CSS Object Model (CSSOM) 3) Repaint e Reflows 4) Propriedades
6. Não perca tempo discutindo isso. É irrelevante do ponto de vista de performance. Já do ponto de vista de modularização é melhor CLASS.
7. 1. ID: 2. Classe: 3. Tag:
8. 4. irmão adjacente: 5. Filho: 6. Descendente: 7. Universal: 8. Atributo: 9. Pseudo-classes/-elements:
12. Evite regras universais: Não qualifique regras de #id com tags e classes:
13. Não qualifique regras de classes com tags Use a forma mais específica possível
14. Evite o seletor descendente (melhor, mas ainda ruim) (ideal) Saiba quais propriedades tem herança e utilize-as
15. 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.
16. Não sacrifique a semântica ou a manutenção do seu CSS em troca de performance, a não ser que seja realmente necessário.
18. 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.
20. 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
21. Bytes → caracteres → tokens → nós → modelo de objeto Conversão → Criação de tokens → Lexicalização → Criação do DOM
22. Bytes → caracteres → tokens → nós → modelo de objeto Conversão → Criação de tokens → Lexicalização → Criação do DOM
29. é 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.
30. 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.
33. 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
35. border-radius box-shadow TEXT-SHADOW filter position: fixed;
36. Width Padding Display Border Position Float Overflow-y Overflow Font-family Vertical-align Clear bottom Height Margin Border-width Top Font-size Text-align Font-weight Left Line-height Right White-space Min-height
37. Color Visibility Text-decoration background-position outline-color outline-style outline-width background-size border-style Background background-image background-repeat Outline border-radius box-shadow
38. Position: Scale: Rotation: Opacity: