Upload

Google I/O 2012 - Jank Busters: Building Performant Web Apps

GoogleDevelopersGoogleDevelopers·1,561 videos
231,485
9,156
Like 112     Dislike 3

Sign in to YouTube

Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to like GoogleDevelopers's video.

Sign in to YouTube

Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to dislike GoogleDevelopers's video.

Sign in to YouTube

Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to add GoogleDevelopers's video to your playlist.

Published on Jun 29, 2012

Nat Duca, Tom Wiltzius

Building high-performance web apps is hard! When animations hitch, mouse hover effects lag, or page scrolls stutter, we call it jank. This talk is about hunting jank down and exterminating it.

Sources of jank in web apps include garbage collector runs, long image decodes, heavy paint times for DOM elements, JavaScript-heavy input handlers, unexpected WebKit layer invalidations, and more -- all getting in the way of the 60FPS every modern app developer should aim for. In this talk we'll go through a few techniques to ensure your web app has smooth animations, transitions, and scrolling. We'll cover ways to use Chrome's Developer Tools to root out jank, as well as more advanced Chrome graphics profiling tools the intrepid can use to dig into what's going on behind the scenes. We'll even peek gingerly under the covers of WebKit to explain why that pesky hitch occurs in the first place.

For all I/O 2012 sessions, go to https://developers.google.com/io/

Loading icon Loading...

Loading icon Loading...

Loading icon Loading...

The interactive transcript could not be loaded.

Loading icon Loading...

Loading icon Loading...

Ratings have been disabled for this video.
Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Sign In or Sign Up now to post a comment!

All Comments (11)

  • Lucas Rizoli

    This is a very good talk: your explanations and recommendations and demos are clear, you handle the questions well and frankly. Thanks.

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Lucas Rizoli's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Lucas Rizoli's comment.
  • MediaFilter

    Funny guys, good talk!

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate MediaFilter's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate MediaFilter's comment.
  • dwoldrich

    setAnimationFrame seems frame locked at 30Hz on Firefox. So, it turns out ... setTimeout is a drop-in replacement for setAnimationFrame, for me, on Firefox. :)

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate dwoldrich's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate dwoldrich's comment.
  • Benjamin Gruenbaum

    Worth noting that although jQuery says it works with requestAnimationFrame, it actually does not (look at the source!)

    good talk

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Benjamin Gruenbaum's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Benjamin Gruenbaum's comment.
  • Jakob Anderson

    Very Very Good Talk. I continue to find numerous ways of speeding and smoothing my web apps, and this talk showed me some new ones I had never heard of!

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Jakob Anderson's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate Jakob Anderson's comment.
  • wizzra

    A great talk!

    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate wizzra's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate wizzra's comment.
  • bgrgyk
    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate bgrgyk's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate bgrgyk's comment.
    in reply to regnoult axel(Show the comment)
  • harimakenji10
    ·

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate harimakenji10's comment.

    Sign in to YouTube

    Sign in with your YouTube Account (YouTube, Google+, Gmail, Orkut, Picasa, or Chrome) to rate harimakenji10's comment.
  • Loading comment...
Loading...
Loading...
Working...
Sign in to add this to a playlist