Rendering Performance

Andre BehrensJonathan KleinPaul LewisAriya HidayatJoshua PeekEli Fidler

Sunday, September 22, 13

60 FPS

Sunday, September 22, 13

16.6 ms

Sunday, September 22, 13

Sunday, September 22, 13

Jank

Sunday, September 22, 13

What Causes Jank?

Sunday, September 22, 13

http://jankfree.org/jank-busters-io-2013/template.html#15

Sunday, September 22, 13

Why Do We Care?

Sunday, September 22, 13

Facebook artificially slowed down frame rate on iOS and Android to 30 FPS, and “engagement collapsed”

- Shane O'Sullivan, Edge London 2013

Sunday, September 22, 13

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

Sunday, September 22, 13

How Do We Fix It?

Sunday, September 22, 13

http://jankfree.org/jank-busters-io-2013/template.html#15

Sunday, September 22, 13

Sunday, September 22, 13

But Really...

Sunday, September 22, 13

But Really...

• requestAnimationFrame, not setTimeout

Sunday, September 22, 13

But Really...

• requestAnimationFrame, not setTimeout• Consistent frame rate > high frame rate

Sunday, September 22, 13

But Really...

• requestAnimationFrame, not setTimeout• Consistent frame rate > high frame rate• Paint less (batch)

Sunday, September 22, 13

But Really...

• requestAnimationFrame, not setTimeout• Consistent frame rate > high frame rate• Paint less (batch)

• Consider translateZ hack

Sunday, September 22, 13

But Really...

• requestAnimationFrame, not setTimeout• Consistent frame rate > high frame rate• Paint less (batch)

• Consider translateZ hack

• Optimize texture uploads to the GPU

Sunday, September 22, 13

Don’t Guess It, Test It!

Sunday, September 22, 13

jankfree.org

Sunday, September 22, 13

Panel

Sunday, September 22, 13