Google chrome devtools chrome开发工具中的层组成

我在div元素上有简单的过渡动画。为了防止不必要的绘制事件，我对它应用了更高的z索引和0变换，因此这个div很可能位于它自己的层上。但瀑布图显示了每个动画滴答声之后可能发生的层组成事件。我想知道，这是GPU页面渲染之前的最终层合成，并且在页面上的每次更改之前都是不可避免的，还是我只是做错了什么？

时间轴中的合成事件总是在更新动画帧时发出的，您以前的假设是正确的。若要验证已设置动画的div是否实际成为该层，请查找绘制事件——这些事件是每层的，如果一个层相对于另一个层进行转换，则在动画期间不应有任何绘制事件，前提是层内容不变。还要注意的是，在Chrome（m30+）的最新版本中，Timeline显示了与事件的popover中的绘制相关的层的根

另一种检查动画元素是否升级到层的方法是“实验层”面板（在“关于：标志”中启用DevTools实验，重新启动Chrome，然后在DevTools设置的“实验”选项卡中启用层面板）