What's the Overfill counter?

An 'Overfill' counter was added as the 3rd counter to 'layers.acceleration.draw-fps'. This counter measures how many times on average each pixel on the screen is touched and reports the number as a percentage. Keeping that number low roughtly, but not exactly[1], means that we're using less bandwidth. This is particularly important on memory bandwidth contraint mobile devices where high overfill rate will cost us battery and prevent us from staying at 60 FPS.

What's a good or a bad value?

Ideally this number should be NO LESS but as close to 100% as possible. Note that 0% denotes a complex transformation that are not handled. While a page is idle the overfill counter should not be significantly above 100%. Animated transparent content will cause overfill because of the blending. For example while swipping the Homescreen we're animated a nearly full screen sized layer so the overfill counter will rise to nearly 200% under ideal conditions but not more. This overdraw is reasonable because it lets us animate the icons (~100%) moving relative to the background (~100%) without re-rasterizing either. When in doubt if something is reasonable or not ask for help in #gfx.

What causes the value of Overfill to change?

Anything that makes changes to the layer tree. When idle the layer tree is idle typically in its simple rest state. The following will cause changes to the layer tree and potentially impact the overfill metric: (1) Scrolling/Panning (2) Fix position elements (3) Animating content (4) Changing opacity (5) Video frames (6) Canvases (7) Masks (8) CSS 3D transforms and perpective.

How do I minize Overfill?

Since overfill is caused by layerizing, overfill can be minimized by cutting down needless layerizing in your app. For example changing a fix position element to be opaque or cutting back on css animation will reduce overfill. The best procedural way to understand what's responsible for overfill is to selectively hide elements and measure their impact on the overfill counter starting with the parent elements on the page working your way down to more specific element.

[1] Color layers don't cost us texture read bandwidth, component alpha layers cost us twice the texture read bandwidth, driver may cull and save bandwidth.