ariya.io About Talks Articles

Continuous Painting Mode in Chrome

2 min read

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 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 head-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!

Related posts:

♡ this article? Explore more articles and follow me Twitter.

Share this on Twitter Facebook