Performance CSS

Palestra apresentada no CSSDay de maceió!

Transcript

1. View Slide

2. View Slide

3. 1) Seletores CSS
   2) CSS Object Model (CSSOM)
   3) Repaint e Reflows
   4) Propriedades
   

   View Slide

4. View Slide

5. View Slide

6. Não perca tempo discutindo isso.
   É irrelevante do ponto de vista de performance.
   Já do ponto de vista de modularização é melhor
   CLASS.
   

   View Slide

7. 1. ID:
   2. Classe:
   3. Tag:
   

   View Slide

8. 4. irmão adjacente:
   5. Filho:
   6. Descendente:
   7. Universal:
   8. Atributo:
   9. Pseudo-classes/-elements:
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Evite regras universais:
    Não qualifique regras de #id com tags e classes:
    

    View Slide

13. Não qualifique regras de classes com tags
    Use a forma mais específica possível
    

    View Slide

14. Evite o seletor descendente
    (melhor, mas ainda ruim)
    (ideal)
    Saiba quais propriedades tem herança e utilize-as
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

17. View Slide

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.
    

    View Slide

19. View Slide

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
    

    View Slide

21. Bytes → caracteres → tokens → nós → modelo de objeto
    Conversão → Criação de tokens → Lexicalização → Criação do DOM
    

    View Slide

22. Bytes → caracteres → tokens → nós → modelo de objeto
    Conversão → Criação de tokens → Lexicalização → Criação do DOM
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

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.
    

    View Slide

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.
    

    View Slide

31. View Slide

32. View Slide

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
    

    View Slide

34. View Slide

35. border-radius
    box-shadow
    TEXT-SHADOW
    filter
    position: fixed;
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Position:
    Scale:
    Rotation:
    Opacity:
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide