Paul Irish - Chrome Developer Advocate
Your animation rate should match the refresh rate of your device:
Laptops mostly 58-60Hz
but 50Hz in low-power mode
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:
position:fixed. (try position:sticky)
(These may change!)
Demo in Chromium!
display:noneto remove from Layout/Reflow
visibility:hiddento remove from Paint
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.
Paul Irish - Chrome Developer Advocate, Google