performance em animações 7masters

32
Perfomance em animações @hugobessaa

Upload: hugo-bessa

Post on 22-Aug-2015

1.135 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Performance em animações 7Masters

Perfomance em animações

@hugobessaa

Page 2: Performance em animações 7Masters
Page 3: Performance em animações 7Masters
Page 4: Performance em animações 7Masters
Page 5: Performance em animações 7Masters

16ms 16ms 16ms 16ms 16ms

60fps

Page 6: Performance em animações 7Masters

16msJS

Layout Paint Setup Paint Composite

Layers

Page 7: Performance em animações 7Masters

Layout

Page 8: Performance em animações 7Masters

Layout

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

Page 9: Performance em animações 7Masters

Layout

Page 10: Performance em animações 7Masters

Layout

Page 11: Performance em animações 7Masters

Paint

Page 12: Performance em animações 7Masters

Paint

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

Page 13: Performance em animações 7Masters

Paint

Page 14: Performance em animações 7Masters

Paint

Page 15: Performance em animações 7Masters

Composite Layer

Page 16: Performance em animações 7Masters

Composite Layer

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

Page 17: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 18: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 19: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 20: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 21: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 22: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 23: Performance em animações 7Masters

Composite Layer

Venha debater CSS no próximo 7Masters23/02/2015 Redação iMasters

Page 24: Performance em animações 7Masters

Composite Layer

.box { opacity: 0.5; transform: translateZ(0); // ... }

cria nossa Composite Layer

Page 25: Performance em animações 7Masters

Composite Layer

.box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... }

cria nossa Composite Layer

Page 26: Performance em animações 7Masters

Composite Layer

.box { opacity: 0.5; transform: translate3d(0, 0, 0); // ... }

cria nossa Composite LayerHACK

Page 27: Performance em animações 7Masters

Composite Layer

.box { opacity: 0.5; will-change: opacity; // ... }

bit.ly/will-change-prop

Page 28: Performance em animações 7Masters

Composite Layer

opacity scale

translate rotate

Page 29: Performance em animações 7Masters

JavaScript

Layout Trashing

Page 30: Performance em animações 7Masters

Layout Trashing

clientHeight, offsetTop, height, width, scrollTo...

Isso obriga o browser a recalcular todo o layout

bit.ly/layout-trashing-js

Page 31: Performance em animações 7Masters

Referências

bit.ly/css-prop-operations

bit.ly/runtime-perf

bit.ly/mobile-perf-auditing

bit.ly/high-perf-anim

Page 32: Performance em animações 7Masters

Obrigado!

@hugobessaa