Hi, I'm Emily.
performant web animations
PERFORMANT PAGE LOAD IS JUST THE PROLOGUE.
it's all about the user
aim for 60 frames per second
Frame rate measures responsiveness
LET'S TAKE A STEP BACK.
HOW IS THE BROWSER GENERATING PIXELS FROM YOUR CODE?
- Download and parse HTML, CSS, JS
- Calculate element styles
GEOMETRY OF THE PAGE
- Generate layout of the page from the render tree
- Highly interdependent
filling in the pixels
- Calculation of visual styles
- Re-paints only occur one per frame
generating the layers
- Separation of elements onto compositor layers
- Allows for non-destructive changes
how can i use this?
ONLY CHANGE PROPERTIES THAT TRIGGER COMPOSITING.
you'll have to get creative.
- Transform an element
- Position (transform: translateX(5px))
- Scale (transform: scale(2))
- Rotation (transform: rotate(90deg))
- Skew (transform: skewX(50deg))
- Matrix (transform: matrix3d(...))
hide & show elements
simplify mobile menus
toggle visibility level
what can i control?
MANUALLY PROMOTE ELEMENTS TO THEIR OWN COMPOSITOR LAYER
- Forcing promotion ensures layer is painted and ready
- Basically, tell the browser what needs help
what needs help?
anything that is paint expensive
- Elements that will be changed
- And more! (fixed: position; overflow: scroll)
ok, but how??
The old method
"Trick" the browser to promote the element
the shiny, new method
Tell the browser what's needed ahead of time
THERE CAN BE TOO MANY COMPOSITED LAYERS
- will-change optimizations are resource heavy
- Usage implies an element is always moments away from changing
They say a picture's worth 1000 words...
IMPERATIVE VS. DECLARATIVE
choose the best tool for the job.
- Browser knows the end point of the operation
- Runs off the main thread
- More performant
- More responsive to user input
- Runs on the main thread
- Less performant
spin... on click!
what if i need js?
- Native API for running an animation
- Browser optimizes for performance
Speaking of scroll performance...
Passive event listeners
Intersection Observer API
avoid layout thrashing
above and beyond!
- Indicate an element's subtree is independent from the rest of the page
- Tells the browser it's safe to optimize an element
you'll have to get hacky
chrome developer tools
... your users will thank you!
Performant Web Animations