Build smoother web apps with Chrome Developer Tools

Whether your web app involves scrolling down a long list of news headlines or a game with flying birds and crumbling structures, you want your web app to look as smooth as native apps. It used to be tricky to chase down the cause of animation jitter and lag in user actions with Chrome Developer Tools. This is why we’ve added the Frame Mode to our Timeline panel to help you pinpoint offending long frames and understand what’s causing them to run slowly.

So, what’s a frame? A frame includes all the tasks that the browser needs to perform in order to update the screen upon a user action or a tick of the animation timer. A complex, but not uncommon, sequence might be:

1. run JavaScript animations and other event handlers 
2. update CSS animations 
3. recalculate styles and lay out the elements in the DOM 
4. re-paint the updated layers of the page 
5. compose them and present to the user 

Delivering a butter-smooth animation means completing all of the above in less than 16.6ms(common 60Hz refresh rate). If you are not done by then, you’ll miss the frame and the animation will appear janky.

To see how using Timeline can help you, run your favorite browser-based game, then open Developer Tools and record the Timeline while the game is running some animation. The Timeline Frame mode will now show you colored bars, each representing a frame. The colors correspond to different types of timeline events:

• network activity and HTML parsing (blue) 
• running JavaScript (yellow) 
• performing style recalculation and layout (violet) 
• painting and compositing (green) 

You can zoom in by selecting several frames or by clicking on a particular frame of interest. Looking at a specific frame in detailed view will show you the frame duration, and you can find more detailed statistics by hovering on it.

 

Even if your web app doesn’t have animation in it, the notion of a frame is still useful because the browser performs a repeated sequence of actions while processing input events such as keypress, mouse actions, scrolling etc. Leaving enough time to process such events inside a frame makes your app more responsive and interactive, resulting in a better overall experience for users.

In large web applications with huge DOM trees, layout typically takes time and resources. Doing it in a loop makes things much worse. So we’ve added a warning mark on layouts that were forced, by requesting positional properties (e.g. offsetWidth and offsetHeight) of DOM elements from JavaScript. If you hover over the layout event, you can see two stacks -- one that invalidated the DOM and another that caused layout synchronously. You can also see the area that had to be re-laid highlighted on the screen.

 

Finally, don’t forget that the best practice for dealing with animations is to use therequestAnimationFrame API, which guarantees that Chromium will call back your animation code in sync with the display refresh.

You can learn more about optimizing rendering performance of a page in Tom Wiltzius’ article on html5rocks.com. Follow Google Chrome Developers on Google+ or @ChromiumDev on Twitter for more news on Chrome Developer Tools.

Posted by Andrey Kosyakov, Software Engineer