Date post: | 13-Aug-2015 |
Category: |
Internet |
Upload: | apoorv-saxena |
View: | 253 times |
Download: | 0 times |
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.
width overflow height
padding font-family margin
display vertical-align border-width
border clear top
position bottom font-size
float left text-align
overflow-y right line-height
font-weight white-space min-height
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow
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.
What can cause Jank during animation?
Triggering any other operation that can cause the animation to exceed its frame
budget.
What can cause Jank during interaction with page?
Synchronous operation(s) inside the event handler that exceeds the current frame
budget.
Forced Synchronous LayoutDOM write operation followed by a DOM read operation
for a layout property of a DOM element
Layout ThrashingForced synchronous layout in quick succession
Demo: Animations example