Performance em animações 7Masters

1.490 visualizações

Publicada em

Palestra sobre performance em animações apresentada no 7Masters CSS em 25/02/2015

0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.490
No SlideShare
0
A partir de incorporações
0
Número de incorporações
687
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Performance em animações 7Masters

  1. 1. Perfomance em animações @hugobessaa
  2. 2. 16ms 16ms 16ms 16ms 16ms 60fps
  3. 3. 16ms JS Layout Paint Setup Paint Composite Layers
  4. 4. Layout
  5. 5. Layout .box { width: 300px; height: 300px; margin: 10px; // ... }
  6. 6. Layout
  7. 7. Layout
  8. 8. Paint
  9. 9. Paint .box { color: green; border-style: solid; // ... }
  10. 10. Paint
  11. 11. Paint
  12. 12. Composite Layer
  13. 13. Composite Layer .box { opacity: 0.5; transform: scale(1.2); // ... }
  14. 14. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  15. 15. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  16. 16. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  17. 17. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  18. 18. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  19. 19. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  20. 20. Composite Layer Venha debater CSS no próximo 7Masters 23/02/2015 Redação iMasters
  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 bit.ly/layout-trashing-js
  28. 28. Referências bit.ly/css-prop-operations bit.ly/runtime-perf bit.ly/mobile-perf-auditing bit.ly/high-perf-anim
  29. 29. Obrigado! @hugobessaa

×