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

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/

• Category

  Science & Technology

[Dongseong Hwang]

@dsego84 it is not true. now chromium's hidden technology is 3 times more elaborate and complicated than safari's. I think safari team feels that they can not overcome chromium anymore.

[Josh Bedo]

Chromium is intended for developers and has a lot of unreleased features because they're still in production but they help developers. Things like convert CSS to SASS and revisioning.

[dsego84]

Maybe chrome is janky, Safari is smooth as butter.

[Homezone]

They work for Google and use Chromium? o_O

[ericthewino]

cool. thanks for pointing me to the time. i guess it would be best to recache on resize.

[fezec]

It's because they already retrieved the layout calculation. Note the code at 13:08. Line 57 says if heavy scroll which is what he toggles on his demo. This forces line 58 to run, which retrieves the scrollTop from the body, forcing a calculation of the DOM, but line 54 shows that he already asked for this.

When he toggles off heavyScroll rather than use line 58 it uses 60 in the else statement. Here it makes use of the cachedScrollTop thereby not forcing yet another recalculation.

[ericthewino]

sorry i don't get what happened around 14:40 that made the event less delay. was the scrolltop cached?

[Lucas Rizoli]

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

[MediaFilter]

Funny guys, good talk!