Performance em animações
10 likes3,104 views
The document discusses techniques for improving animation performance in web pages. It explains that the browser rendering process involves layout, paint, and composite layers steps. It recommends using properties like translate3d to create composite layers for animated elements, and will-change to indicate which properties will change, in order to achieve 60 frames per second for smooth animations. It also warns against "layout trashing" from methods that force layout recalculation.
Performance em animações
- 3. +++ UX
- 7. 16ms 16ms 16ms 16ms 16ms 60fps
- 8. 16ms JS Layout Paint Setup Paint Composite Layers
- 9. Layout
- 10. Layout .box { width: 300px; height: 300px; margin: 10px; // ... }
- 11. Layout
- 12. Layout
- 13. Paint
- 14. Paint .box { color: green; border-style: solid; // ... }
- 15. Paint
- 16. Paint
- 17. Composite Layer
- 18. Composite Layer .box { opacity: 0.5; transform: scale(1.2); // ... }
- 19. Composite Layer
- 20. Composite Layer
- 23. Layout Paint Setup Paint Composite Layers Devagar OK Rápido Horrivelmente lento Lento Rápido Desktop Mobile
- 24. Composite Layer .box { opacity: 0.5; transform: translateZ(0); // ... } cria nossa Composite Layer
- 25. Composite Layer .box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite Layer
- 26. Composite Layer .box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite LayerHACK
- 27. Composite Layer .box { opacity: 0.5; will-change: opacity; // ... } bit.ly/will-change-prop
- 28. Composite Layer opacity scale translate rotate
- 30. Layout Trashing clientHeight, offsetTop, height, width, scrollTo... Isso obriga o browser a recalcular todo o layout
- 31. 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