0
Rendering Performance
Andre Behrens
Jonathan Klein
Paul Lewis
Ariya Hidayat
Joshua Peek
Eli 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, E...
Etsy tested pre-fetching JS on our search results page, which
caused jank as the JS finished downloading. All business
metr...
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)
Sunda...
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
• Paint less (batch)
• Con...
But Really...
• requestAnimationFrame, not setTimeout
• Consistent frame rate > high frame rate
• Paint less (batch)
• Con...
Don’t Guess It, Test It!
Sunday, September 22, 13
jankfree.org
Sunday, September 22, 13
Panel
Sunday, September 22, 13
Upcoming SlideShare
Loading in...5
×

Edge Conf Rendering Performance Panel

1,238

Published on

The 10 minute opening talk for the Rendering Performance panel at Edge NY, September 23rd 2013. This was just designed to give a brief overview of the topic before the Q&A portion of the panel.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,238
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Edge Conf Rendering Performance Panel"

  1. 1. Rendering Performance Andre Behrens Jonathan Klein Paul Lewis Ariya Hidayat Joshua Peek Eli Fidler Sunday, September 22, 13
  2. 2. 60 FPS Sunday, September 22, 13
  3. 3. 16.6 ms Sunday, September 22, 13
  4. 4. Sunday, September 22, 13
  5. 5. Jank Sunday, September 22, 13
  6. 6. What Causes Jank? Sunday, September 22, 13
  7. 7. http://jankfree.org/jank-busters-io-2013/template.html#15 Sunday, September 22, 13
  8. 8. Why Do We Care? Sunday, September 22, 13
  9. 9. 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
  10. 10. 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
  11. 11. How Do We Fix It? Sunday, September 22, 13
  12. 12. http://jankfree.org/jank-busters-io-2013/template.html#15 Sunday, September 22, 13
  13. 13. Sunday, September 22, 13
  14. 14. But Really... Sunday, September 22, 13
  15. 15. But Really... • requestAnimationFrame, not setTimeout Sunday, September 22, 13
  16. 16. But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate Sunday, September 22, 13
  17. 17. But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) Sunday, September 22, 13
  18. 18. But Really... • requestAnimationFrame, not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) • Consider translateZ hack Sunday, September 22, 13
  19. 19. 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
  20. 20. Don’t Guess It, Test It! Sunday, September 22, 13
  21. 21. jankfree.org Sunday, September 22, 13
  22. 22. Panel Sunday, September 22, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×