7Masters CSS | Performance em Animações, por Hugo Bessa
32
Perfomance em animações @hugobessaa
-
Upload
imasters -
Category
Technology
-
view
257 -
download
0
Transcript of 7Masters CSS | Performance em Animações, por Hugo Bessa
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
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