$30 off During Our Annual Pro Sale. View Details »

Performance CSS

Performance CSS

Palestra apresentada no CSSDay de maceió!

Guilherme Farias

May 07, 2016
Tweet

More Decks by Guilherme Farias

Other Decks in Programming

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