Bad Example Good Example
Your animation rate should match the refresh rate of your device:
Laptops mostly 58-60Hz
but 50Hz in low-power mode
Use DevTools' Timeline to identify jank!
Most of what happens in a tab happens on one thread.
But we can run some things even when JS is busy. Like CSS animation!
This is on Chrome for Android first, everywhere else soon.
Use CSS animation to let the browser do the right thing:
Like with requestAnimationFrame, the benefits are:
Fixed up example
Sometimes you want to go further or you get stuck.
Turn to about:tracing.
Documentation is on dev.chromium.org
Browsers evolve fast.
The architectural best practices are here to stay.
But the specifics of what's slow will change.
Train your eyes and use the tools to hunt down jank when it appears.