chrome dev工具中的图层组合

Question

我在 div 元素上有简单的过渡动画。为了防止不必要的绘制事件，我应用了更高的z-index和0转换，因此 div 可能在它自己的图层上。但是瀑布图表显示了在每个动画刻度之后可能发生的图层组合事件。我想知道，这是GPU页面呈现之前的最后一层构图，并且在页面上的每次更改之前是不可避免的，或者我只是做错了吗？

Answer 1

在更新动画帧时始终会发出时间轴中的合成事件，并且您之前的假设是正确的。要验证您的动画div是否实际成为图层，请查找Paint事件 - 这些是每层，如果一个图层相对于另一个图层相对转换，则动画期间不应该有任何绘制事件，前提是图层内容不会更改。另请注意，在最新版本的Chrome（m30 +）中，时间轴显示与事件的弹出窗口中的Paint相关联的图层的根。

检查动画元素是否已升级为图层的另一种方法是实验“图层”面板（在about：flags中启用DevTools实验，重新启动Chrome，然后在DevTools设置的“实验”标签中启用“图层”面板）。