Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Performance em animações

2 802 vues

Publié le

Como melhorar a performance em animações CSS

Publié dans : Technologie
  • Soyez le premier à commenter

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

×