Performance em animações
-
Upload
hugo-bessa -
Category
Technology
-
view
1.275 -
download
0
Transcript of Performance em animações
Layout
Paint Setup Paint
Composite Layers
Devagar
OK
Rápido
Horrivelmente lento
Lento
Rápido
Desktop Mobile
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
Layout Trashing
clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth, height, width, getBoundingClientRect(), getClientRects(), computeCTM(), getBBox(), getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString(), instanceRoot, getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()
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