Upload
hugo-bessa
View
1.135
Download
0
Embed Size (px)
Citation preview
Perfomance em animações
@hugobessaa
16ms 16ms 16ms 16ms 16ms
60fps
16msJS
Layout Paint Setup Paint 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 Layer
opacity 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