Talk to be presented at jQuery Conference on 24th July. It discusses the potential issues that hamper the rendering performance, and also their respective remedies.
At EdgeConf 2012,
Facebook confirmed this when it
mentioned that in an A/B test, it slowed
down scrolling from 60fps to 30fps,
causing engagement to collapse.
What is smooth interaction?
Devices refresh their screen 60 times a second.
Thus, frame budget for smooth interaction is 16ms
(1 second / 60 frames = 16.66 ms / frame)
Though, browser has got some householding work as well,
which leaves us with about 10ms in total.
What can cause Jank during scroll?
Processing that consumes more than 16ms:
● Time consuming operations e.g. Garbage Collection event.
● JavaScript triggered operations that consume lot of time e.g.
Layout Thrashing
● Loads of repainting on the screen, reason can be attributed
to JS / CSS or both.