Performance Zone is brought to you in partnership with:

Ariya is a passionate engineer interested in bleeding-edge technologies. He has been involved in various large projects, from KDE to WebKit. These days, his focus is mostly on software craftsmanship around web technologies. His (little) spare time is spent running the projects PhantomJS (headless WebKit) and Esprima (JavaScript parser). Ariya is a DZone MVB and is not an employee of DZone and has posted 59 posts at DZone. You can read more from them at their website. View Full User Profile

Continuous Painting Mode in Chrome

08.06.2013
| 1791 views |
  • submit to reddit

Getting a consistent 60-fps experience on mobile web means that we need to monitor the performance criteria. One important metric is the painting time, particularly important on a resource-constraint device. Fortunately, with Chrome’s continuous painting mode, it is easy to check whether the performance budget is fulfilled or not.

To set this up on an Android phone, remote debugging must be enabled (follow the detailed steps). On the desktop side, install ADB Plugin from Chrome Web Store. If everything works well, remote debugging is just one click away. Once the session starts, look for the Settings icon (right bottom corner) which will open the Settings pane. From this pane, Enable continuous page repainting is easy to locate.

continuouspainting

glow
Once it is activated, there will be a simple, greenish heads-up display (HUD) which displays the painting time rate chart (as a function of time), as well as the GPU memory consumption. The chart has a threshold line: this is the 16.7 ms painting time corresponding with the target frame rate of 60 fps.

The following screenshot demonstrates the HUD for a simple web page, ariya.github.io/css/glowingtext/. This page was designed to simulate an animated glowing text by varying the blur radius of the text shadow.

For this example, we can see how the painting time gets modulated. This is because the glow effect increases and decreases the blur radius, and hence it varies the amount of pixels processed for every frame. That explains why the painting time chart has those periodic peaks and valleys.

Overall, this HUD is quite similar to the FPS counter (see my previous blog post Frame Rate HUD on Chrome for Android). However, since what is being displayed here is the painting time, it is more convenient to spot the spikes indicating "too slow" painting.

timeline

Arguably, while you are there, you might as well use the full performance analysis via the Timeline feature (shown above). In particular, some detailed rendering and painting records can be easily obtained, refer to Chrome Developer Tools documentation for more info.

To the glory of 60 fps!

Published at DZone with permission of Ariya Hidayat, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)