Download to read offline
Uploaded byJonathan Klein
Edge Conf Rendering Performance Panel
The document discusses rendering performance issues, particularly 'jank' in animations, which negatively impacts user engagement as evidenced by case studies from Facebook and Etsy. It suggests solutions such as using requestAnimationFrame, maintaining consistent frame rates, and reducing painting tasks to improve performance. The importance of testing rather than guessing solutions is emphasized throughout.
Edge Conf Rendering Performance Panel
- 1. Rendering Performance Andre Behrens JonathanKlein Paul Lewis Ariya Hidayat Joshua Peek Eli Fidler Sunday, September 22, 13
- 2. 60 FPS Sunday, September22, 13
- 3.
- 4.
- 5.
- 6. What Causes Jank? Sunday,September 22, 13
- 7.
- 8. Why Do WeCare? Sunday, September 22, 13
- 9. Facebook artificially sloweddown frame rate on iOS and Android to 30 FPS, and “engagement collapsed” - Shane O'Sullivan, Edge London 2013 Sunday, September 22, 13
- 10. Etsy tested pre-fetchingJS 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. How Do WeFix It? Sunday, September 22, 13
- 12.
- 13.
- 14.
- 15. But Really... • requestAnimationFrame,not setTimeout Sunday, September 22, 13
- 16. But Really... • requestAnimationFrame,not setTimeout • Consistent frame rate > high frame rate Sunday, September 22, 13
- 17. But Really... • requestAnimationFrame,not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) Sunday, September 22, 13
- 18. But Really... • requestAnimationFrame,not setTimeout • Consistent frame rate > high frame rate • Paint less (batch) • Consider translateZ hack Sunday, September 22, 13
- 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. Don’t Guess It,Test It! Sunday, September 22, 13
- 21.
- 22.