Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Position: Scale: Rotation: Opacity:

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content