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
Top Related