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别无选择 recalc风格，重新布局，油漆和复合材料。有时这些当没有任何有效改变的时候，步骤可以提早 - 但是那样很难确定。

另见Compositor Thread Architecture - 似乎rAF触发了两个合成器线程之间的层树同步。

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

1 个答案: