7masters css | performance em animações, por hugo bessa

32
Perfomance em animações @hugobessaa

Upload: imasters

Post on 16-Jul-2015

257 views

Category:

Technology


0 download

TRANSCRIPT

Perfomanceem animações

@hugobessaa

16ms 16ms 16ms 16ms 16ms

60fps

16msJS

Layout Paint SetupPaint Composite

Layers

Layout

Layout

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

Layout

Layout

Paint

Paint

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

Paint

Paint

Composite Layer

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

Composite Layer

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

cria nossa Composite Layer

Composite Layer

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

cria nossa Composite Layer

Composite Layer

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

cria nossa Composite LayerHACK

Composite Layer

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

bit.ly/will-change-prop

Composite Layeropacity scale

translate rotate

JavaScript

Layout Trashing

Layout Trashing

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

Isso obriga o browser a recalcular todo o layout

bit.ly/layout-trashing-js

Referências

bit.ly/css-prop-operations

bit.ly/runtime-perf

bit.ly/mobile-perf-auditing

bit.ly/high-perf-anim

Obrigado!

@hugobessaa