Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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