Friday, November 16, 2012
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:
- update CSS animations
- recalculate styles and lay out the elements in the DOM
- re-paint the updated layers of the page
- compose them and present to the user
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)
- performing style recalculation and layout (violet)
- painting and compositing (green)
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.
Finally, don’t forget that the best practice for dealing with animations is to use the requestAnimationFrame 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.