chrome 开发工具中的图层组合

Question

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

Answer 1

时间轴中的合成事件总是在更新动画帧时发出，您之前的假设是正确的。要验证您的动画 div 是否真正成为图层，请查找 Paint 事件——这些事件是每个图层的，如果一个图层相对于另一个图层过渡，则在动画期间不应有任何绘制事件，前提是图层内容不改变。另请注意，在最新版本的 Chrome (m30+) 中，时间轴会显示与事件弹出框中的 Paint 相关联的层的根。

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