Performance CSS

Performance CSS

Palestra apresentada no CSSDay de maceió!

5b6ee6fc4089c6f2e5f8403d9bf9ef08?s=128

Guilherme Farias

May 07, 2016
Tweet

Transcript

  1. 1.
  2. 2.
  3. 4.
  4. 5.
  5. 6.

    Não perca tempo discutindo isso. É irrelevante do ponto de

    vista de performance. Já do ponto de vista de modularização é melhor CLASS.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 14.

    Evite o seletor descendente (melhor, mas ainda ruim) (ideal) Saiba

    quais propriedades tem herança e utilize-as
  11. 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.
  12. 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.
  13. 17.
  14. 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.
  15. 19.
  16. 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
  17. 21.

    Bytes → caracteres → tokens → nós → modelo de

    objeto Conversão → Criação de tokens → Lexicalização → Criação do DOM
  18. 22.

    Bytes → caracteres → tokens → nós → modelo de

    objeto Conversão → Criação de tokens → Lexicalização → Criação do DOM
  19. 23.
  20. 24.
  21. 25.
  22. 26.
  23. 27.
  24. 28.
  25. 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.
  26. 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.
  27. 31.
  28. 32.
  29. 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
  30. 34.
  31. 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
  32. 39.
  33. 40.
  34. 41.
  35. 42.
  36. 43.
  37. 44.
  38. 45.
  39. 46.
  40. 47.
  41. 48.
  42. 49.
  43. 50.