Abinav Seelan
UI Engineer @Flipkart • Ex @hashnode & @SaltsideTech • Javascript Junkie & Pokemon League Champion from India. https://abinavseelan.com 🙃
Animation Performance - Quick Wins
@abinavseelan
blog.campvanilla.com
What makes a website fast? ⚡️
What makes a website fast? ⚡️
Time to load
What makes a website fast? ⚡️
Time to load
Time to interactivity
What makes a website fast? ⚡️
Time to load
Time to interactivity
Fluid UI
Click
Scroll
Drag
Click
Scroll
Drag
Animations
Buttery 60fps goodness
🥞
But... how do we stay fluid?
🤔
requestAnimationFrame()
requestAnimationFrame()
Built for games and animations
Will always try to run at 60fps, or will throttle down to 30fps under heavy load
function callback() {
console.log("👋");
requestAnimationFrame(callback);
}
requestAnimationFrame(callback);Demo
rAF vs setInterval
Web Workers for heavy computation
🏋️♀️
Demo
Move computation to web worker
Under the hood, into the browser
The pixel pipeline
Reflowing
Changes in dimension and geometry
width
height
top
left
margin
padding
bottom
right
😈
Repainting
Pixels need to be redrawn
box-shadow
color
background-color
Most expensive task
👻
GPU Accelerated
No reflows & no repaints!
transform
opacity
😇
Demo
Styles that cause reflows
Styles that cause repaints
http://animation-workshop.herokuapp.com/
Layers
.move {
transform: translateX(10px);
will-change: transform;
}Can't we just layer all the things?
Add `will-change` when animating
Remove `will-change` once done
One more thing....
🎁
event listeners
Execute before render
What if you cancel the interaction?
Heavy processing = jank
passive event listeners
document.addEventListener('touchstart', moveObject, {
passive: true,
});Demo
Scroll jank - https://rbyers.github.io/scroll-latency.html
That's all folks! 🚀
@abinavseelan
blog.campvanilla.com
Content sourced from these amazing folks
Abinash Mohapatra
Jake Archibald
Will boyd
Animation Performance - Quick Wins
By Abinav Seelan
Animation Performance - Quick Wins
Talk given at Flipkart's UI Bootcamp, 2018
