Como melhorar a performance em animações CSS

1. Perfomance
em animações
@hugobessaa

2. + bonito
+ rico

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

21. Composite Layer
2 layers

22. Layout
Paint Setup
Paint
Composite
Layers
Devagar
OK
Rápido

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

29. JavaScript
Layout Trashing

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

33. Referências
bit.ly/css-prop-operations
bit.ly/runtime-perf
bit.ly/mobile-perf-auditing
bit.ly/high-perf-anim

34. Obrigado!
@hugobessaa