Perfomance em animações

@hugobessaa

+ bonito + rico

+++ UX

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

Composite Layer

Composite Layer

2 layers

Layout

Paint Setup Paint

Composite Layers

Devagar

OK

Rápido

Layout

Paint Setup Paint

Composite Layers

Devagar

OK

Rápido

Horrivelmente lento

Lento

Rápido

Desktop Mobile

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

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

Obrigado!

@hugobessaa