Rendering Performance
Andre Behrens
Jonathan Klein
Paul Lewis
Ariya Hidayat
Joshua Peek
Eli Fidler
Tuesday, September 17, 13
Slide 2
Slide 2 text
60 FPS
Tuesday, September 17, 13
Slide 3
Slide 3 text
16.6 ms
Tuesday, September 17, 13
Slide 4
Slide 4 text
Tuesday, September 17, 13
Slide 5
Slide 5 text
Jank
Tuesday, September 17, 13
Slide 6
Slide 6 text
What Causes Jank?
Tuesday, September 17, 13
Slide 7
Slide 7 text
http://jankfree.org/jank-busters-io-2013/template.html#15
Tuesday, September 17, 13
Slide 8
Slide 8 text
Why Do We Care?
Tuesday, September 17, 13
Slide 9
Slide 9 text
Facebook artificially slowed down frame rate on iOS and
Android to 30 FPS, and “engagement collapsed”
- Shane O'Sullivan, Edge London 2013
Tuesday, September 17, 13
Slide 10
Slide 10 text
Etsy tested pre-fetching JS on our search results page, which
caused jank as the JS finished downloading. All business
metrics we monitored got much worse.
- Me, right now
Tuesday, September 17, 13
Slide 11
Slide 11 text
How Do We Fix It?
Tuesday, September 17, 13
Slide 12
Slide 12 text
http://jankfree.org/jank-busters-io-2013/template.html#15
Tuesday, September 17, 13
Slide 13
Slide 13 text
Tuesday, September 17, 13
Slide 14
Slide 14 text
But Really...
Tuesday, September 17, 13
Slide 15
Slide 15 text
But Really...
• requestAnimationFrame, not setTimeout
Tuesday, September 17, 13
Slide 16
Slide 16 text
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
Tuesday, September 17, 13
Slide 17
Slide 17 text
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
• Paint less (batch)
Tuesday, September 17, 13
Slide 18
Slide 18 text
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
• Paint less (batch)
• Consider translateZ hack for desktop
Tuesday, September 17, 13
Slide 19
Slide 19 text
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
• Paint less (batch)
• Consider translateZ hack for desktop
• Don’t guess it, test it!
Tuesday, September 17, 13