Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Edge Conf Rendering Performance Panel - Opening Talk

Jonathan Klein
September 23, 2013

Edge Conf Rendering Performance Panel - Opening Talk

This was 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.

Jonathan Klein

September 23, 2013
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. Rendering Performance
    Andre Behrens
    Jonathan Klein
    Paul Lewis
    Ariya Hidayat
    Joshua Peek
    Eli Fidler
    Tuesday, September 17, 13

    View full-size slide

  2. 60 FPS
    Tuesday, September 17, 13

    View full-size slide

  3. 16.6 ms
    Tuesday, September 17, 13

    View full-size slide

  4. Tuesday, September 17, 13

    View full-size slide

  5. Jank
    Tuesday, September 17, 13

    View full-size slide

  6. What Causes Jank?
    Tuesday, September 17, 13

    View full-size slide

  7. http://jankfree.org/jank-busters-io-2013/template.html#15
    Tuesday, September 17, 13

    View full-size slide

  8. Why Do We Care?
    Tuesday, September 17, 13

    View full-size slide

  9. 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

    View full-size slide

  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
    Tuesday, September 17, 13

    View full-size slide

  11. How Do We Fix It?
    Tuesday, September 17, 13

    View full-size slide

  12. http://jankfree.org/jank-busters-io-2013/template.html#15
    Tuesday, September 17, 13

    View full-size slide

  13. Tuesday, September 17, 13

    View full-size slide

  14. But Really...
    Tuesday, September 17, 13

    View full-size slide

  15. But Really...
    • requestAnimationFrame, not setTimeout
    Tuesday, September 17, 13

    View full-size slide

  16. But Really...
    • requestAnimationFrame, not setTimeout
    • Consistent frame rate > high frame rate
    Tuesday, September 17, 13

    View full-size slide

  17. But Really...
    • requestAnimationFrame, not setTimeout
    • Consistent frame rate > high frame rate
    • Paint less (batch)
    Tuesday, September 17, 13

    View full-size slide

  18. But Really...
    • requestAnimationFrame, not setTimeout
    • Consistent frame rate > high frame rate
    • Paint less (batch)
    • Consider translateZ hack for desktop
    Tuesday, September 17, 13

    View full-size slide

  19. 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

    View full-size slide

  20. jankfree.org
    Tuesday, September 17, 13

    View full-size slide

  21. Panel
    Tuesday, September 17, 13

    View full-size slide