Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. Não perca tempo discutindo isso. É irrelevante do ponto de

    vista de performance. Já do ponto de vista de modularização é melhor CLASS.
  2. Evite o seletor descendente (melhor, mas ainda ruim) (ideal) Saiba

    quais propriedades tem herança e utilize-as
  3. 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.
  4. 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.
  5. 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.
  6. 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
  7. Bytes → caracteres → tokens → nós → modelo de

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

    objeto Conversão → Criação de tokens → Lexicalização → Criação do DOM
  9. é 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.
  10. 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.
  11. 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
  12. 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