Continuous Painting Mode in Chrome
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
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!