Chrome正在合成图层而不会触发重绘

Question

在调试我正在研究的画布库时,我遇到过,chrome-devtools会在每个动画帧中继续报告"复合图层"和"更新图层树",而无需重新绘制或移动任何对象.

一个例子:

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

这些操作不是时间密集的(每帧0.005 - 0.05 ms),但我想知道为什么会发生这种情况.

我想到的唯一想法是,chrome使用类似于:

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" );

因此,如果是这种情况,为什么"油漆","重新计算风格","布局"......不会以同样的方式触发？

更新:

• 这种情况发生在Chrome 36/37(Windows)中
• 在Chromium 34(Linux)上,它只显示复合图层
• 其他系统未经测试

Edit1: 仅在使用时发生requestAnimationFrame.setInterval仅按预期显示计时器已触发.

Edit2: 示例的完整源代码:pastebin

Answer 1

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

...即使像素输出到屏幕没有任何变化,页面也可能通过例如弄脏文档的样式来使整个渲染状态无效.Blink别无选择,只能在这一点上重新制作风格,重新布局,绘画和复合.有时这些步骤可以在没有任何实际改变的情况下提前解决,但这很难确定.

另请参见Compositor线程体系结构 - 似乎rAF触发两个合成器线程之间的层树同步.