Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Performance em animações

2.799 Aufrufe

Veröffentlicht am

Como melhorar a performance em animações CSS

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×