小编bbu*_*erl的帖子

在调试我正在研究的画布库时,我遇到过,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