Successfully reported this slideshow.

Performance em animações

10

Share

1 of 34
1 of 34

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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

×