Chrome is compositing layers without triggering repaint

Question

While debugging a canvas library I'm working on, i encountered, that chrome-devtools keep reporting "composite layers" and "update layer tree" every animationframe, without repainting or moving any objects.

An example:

var x = 0;
( function tick( ) {
    window.requestAnimationFrame(tick);
    x++;
}( ) )

These operations are not time intensive ( 0.005 - 0.05 ms each frame ), but I would like to know why this is happening.

The only idea coming to my mind, is that chrome uses something similar to:

console.time( "composite layers" );
// do compositing    
for( var i = 0; i < compositedLayers.length; ++i ) {
   // not triggered since compositedLayers.length = 0
   // but takes some time to be checked
   compositedLayers[i].composite();
}
console.timeEnd( "composite layers" );

So if this is the case, why "Paint", "Recalculate Style", "Layout",... are not triggered the same way?

Update:

• This happens in Chrome 36/37 (Windows)
• On Chromium 34 (Linux) it only displays composite layers
• other systems untested

Edit1: This only occurs when using requestAnimationFrame. setInterval only shows timer fired, as expected.

Edit2: Complete Source Code of the example: pastebin

Answer 1

From https://code.google.com/p/chromium/issues/detail?id=325419:

... even if nothing is changing in the pixel output to the screen, it's possible for the page to invalidate the entire rendered state by e.g. dirtying the style of the document. Blink has no choice but to recalc style, relayout, paint and composite at that point. Sometimes these steps can be early-outed when nothing has effectively changed, but that's hard to know for sure.

See also Compositor Thread Architecture - seems like rAF triggers layer tree synchronization between the two compositor threads.