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. 1) Seletores CSS
    2) CSS Object Model (CSSOM)
    3) Repaint e Reflows
    4) Propriedades

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  14. é 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 full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide

  20. Position:
    Scale:
    Rotation:
    Opacity:

    View full-size slide