O documento descreve as etapas do processo de renderização de animações na web: layout, pintura, composição de camadas. Explica como propriedades como "transform" e "opacity" afetam a performance ao forçarem a criação de novas camadas composição. Recomenda técnicas como "will-change" e "translate3d" para melhorar a performance.

1. Perfomance
em animações
@hugobessaa

5. 16ms 16ms 16ms 16ms 16ms
60fps

6. 16ms
JS
Layout Paint Setup
Paint Composite
Layers

7. Layout

8. Layout
.box {
width: 300px;
height: 300px;
margin: 10px;
// ...
}

9. Layout

10. Layout

11. Paint

12. Paint
.box {
color: green;
border-style: solid;
// ...
}

13. Paint

14. Paint

15. Composite Layer

16. Composite Layer
.box {
opacity: 0.5;
transform: scale(1.2);
// ...
}

17. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

18. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

19. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

20. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

21. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

22. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

23. Composite Layer
Venha debater CSS no
próximo 7Masters
23/02/2015 Redação iMasters

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
bit.ly/layout-trashing-js

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

32. Obrigado!
@hugobessaa