Perfomance
em animações
@hugobessaa
+ bonito
+ rico
+++ UX
16ms 16ms 16ms 16ms 16ms
60fps
16ms
JS
Layout Paint Setup
Paint Composite
Layers
Layout
Layout
.box {
width: 300px;
height: 300px;
margin: 10px;
// ...
}
Layout
Layout
Paint
Paint
.box {
color: green;
border-style: solid;
// ...
}
Paint
Paint
Composite Layer
Composite Layer
.box {
opacity: 0.5;
transform: scale(1.2);
// ...
}
Composite Layer
Composite Layer
Composite Layer
2 layers
Layout
Paint Setup
Paint
Composite
Layers
Devagar
OK
Rápido
Layout
Paint Setup
Paint
Composite
Layers
Devagar
OK
Rápido
Horrivelmente lento
Lento
Rápido
Desktop Mobile
Composite Layer
.box {
opacity: 0.5;
transform: translateZ(0);
// ...
}
cria nossa Composite Layer
Composite Layer
.box {
opacity: 0.5;
transform: translate3d(0, 0, 0);
// ...
}
cria nossa Composite Layer
Composite Layer
.box {
opacity: 0.5;
transform: translate3d(0, 0, 0);
// ...
}
cria nossa Composite LayerHACK
Composite Layer
.box {
opacity: 0.5;
will-change: opacity;
// ...
}
bit.ly/will-change-prop
Composite Layer
opacity scale
translate rotate
JavaScript
Layout Trashing
Layout Trashing
clientHeight, offsetTop, height, width, scrollTo...
Isso obriga o browser a recalcular todo o layout
Layout Trashing
clientHeight, clientLeft, clientTop, clientWidth, focus(),
getBoundingClientRect(), getClientRects(), inne...
Referências
bit.ly/css-prop-operations
bit.ly/runtime-perf
bit.ly/mobile-perf-auditing
bit.ly/high-perf-anim
Obrigado!
@hugobessaa
Performance em animações
Performance em animações
Performance em animações
Performance em animações
Próximos SlideShares
Carregando em…5
×

Performance em animações

2.416 visualizações

Publicada em

Como melhorar a performance em animações CSS

Publicada em: Tecnologia
0 comentários
10 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.416
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1.332
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
10
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Performance em animações

  1. 1. Perfomance em animações @hugobessaa
  2. 2. + bonito + rico
  3. 3. +++ UX
  4. 4. 16ms 16ms 16ms 16ms 16ms 60fps
  5. 5. 16ms JS Layout Paint Setup Paint Composite Layers
  6. 6. Layout
  7. 7. Layout .box { width: 300px; height: 300px; margin: 10px; // ... }
  8. 8. Layout
  9. 9. Layout
  10. 10. Paint
  11. 11. Paint .box { color: green; border-style: solid; // ... }
  12. 12. Paint
  13. 13. Paint
  14. 14. Composite Layer
  15. 15. Composite Layer .box { opacity: 0.5; transform: scale(1.2); // ... }
  16. 16. Composite Layer
  17. 17. Composite Layer
  18. 18. Composite Layer 2 layers
  19. 19. Layout Paint Setup Paint Composite Layers Devagar OK Rápido
  20. 20. Layout Paint Setup Paint Composite Layers Devagar OK Rápido Horrivelmente lento Lento Rápido Desktop Mobile
  21. 21. Composite Layer .box { opacity: 0.5; transform: translateZ(0); // ... } cria nossa Composite Layer
  22. 22. Composite Layer .box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite Layer
  23. 23. Composite Layer .box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite LayerHACK
  24. 24. Composite Layer .box { opacity: 0.5; will-change: opacity; // ... } bit.ly/will-change-prop
  25. 25. Composite Layer opacity scale translate rotate
  26. 26. JavaScript Layout Trashing
  27. 27. Layout Trashing clientHeight, offsetTop, height, width, scrollTo... Isso obriga o browser a recalcular todo o layout
  28. 28. Layout Trashing clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth, height, width, getBoundingClientRect(), getClientRects(), computeCTM(), getBBox(), getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString(), instanceRoot, getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode() bit.ly/layout-trashing-js
  29. 29. Referências bit.ly/css-prop-operations bit.ly/runtime-perf bit.ly/mobile-perf-auditing bit.ly/high-perf-anim
  30. 30. Obrigado! @hugobessaa

×