Oct 3, 2012
Janky (on most machines)
Smooth (on most machines)
Your animation rate should match the refresh rate of your device:
Laptops mostly 58-60Hz
but 50Hz in low-power mode
All this crap happens every 16ms:
What causes you to blow budget?
Dev Tools' Timeline View is your friend!
your requestAnimationFrame callback won't run!
Most of these sources of jank apply to scrolling, too.
Avoid complex input & scroll handlers like the plague!For example
Remember: most of a tab is on one thread.
But! Some things can run even when JS is busy.
CSS animation runs on its own. [demo]
This is on Chrome for Android first, everywhere else soon.
Say what you mean:
Like requestAnimationFrame, you get:
Two biggest sources of jank we see:
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.
Architectural best practices are here to stay:
The specifics of what's slow will change.
Use the tools to hunt down jank:
Product Manager, Chrome Graphics