While debugging a canvas library I'm working on, i encountered, that chrome-devtools keep reporting "posite 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 ing to my mind, is that chrome uses something similar to:

console.time( "posite layers" );
// do positing    
for( var i = 0; i < positedLayers.length; ++i ) {
   // not triggered since positedLayers.length = 0
   // but takes some time to be checked
   positedLayers[i]posite();
}
console.timeEnd( "posite 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 posite 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

While debugging a canvas library I'm working on, i encountered, that chrome-devtools keep reporting "posite 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 ing to my mind, is that chrome uses something similar to:

console.time( "posite layers" );
// do positing    
for( var i = 0; i < positedLayers.length; ++i ) {
   // not triggered since positedLayers.length = 0
   // but takes some time to be checked
   positedLayers[i].posite();
}
console.timeEnd( "posite 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 posite 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

• javascript
• google-chrome
• google-chrome-devtools

Share Improve this question Follow edited May 27, 2014 at 14:29 bbuecherl asked May 9, 2014 at 9:39 bbuecherlbbuecherl 1,6191212 silver badges2020 bronze badges 6

• did u try to $ trigger(resize) ? – STEEL Commented May 27, 2014 at 4:38
• look at the link of the edit, it's the plete sourcecode. No jQuery, no other libraries, no DOM manipulation, no canvas, nothing. – bbuecherl Commented May 27, 2014 at 14:30
• But you're not doing anything with the DOM so why should it? EDIT: oh sorry didn't read it right, but since you request an animationframe it is supposed to do this right? – EaterOfCode Commented May 27, 2014 at 14:34
• Thats exactly my question... shouldn't rAF act like setInterval? – bbuecherl Commented May 27, 2014 at 14:36
• What i meant was can you trigger resize event . and then see if it repaints. – STEEL Commented May 28, 2014 at 11:40

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

From https://code.google./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 posite 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 positor threads.