Over a million developers have joined DZone.

Continuous Painting Mode in Chrome

DZone's Guide to

Continuous Painting Mode in Chrome

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.


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.


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!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Ariya Hidayat, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}