Performance CSS

Performance CSS

Palestra apresentada no CSSDay de maceió!

5b6ee6fc4089c6f2e5f8403d9bf9ef08?s=128

Guilherme Farias

May 07, 2016
Tweet

Transcript

  1. None
  2. None
  3. 1) Seletores CSS 2) CSS Object Model (CSSOM) 3) Repaint

    e Reflows 4) Propriedades
  4. None
  5. None
  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:
  9. None
  10. None
  11. None
  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.
  17. None
  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.
  19. None
  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
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  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.
  31. None
  32. None
  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
  34. None
  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:

  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None