google-chrome-devtools - Layer composition in the chrome dev tools

Question

I have simple transition animation on div element. To prevent unnecessary paint events i applied to it higher z-index and 0 transformation so this div is likely to be on it's own layer. But waterfall chart shows layer composition event thats is likely to occur after each animated tick. I wonder, is this some final layer composition before GPU page render and is inevitable before every change on the page or i just doing sometning wrong?

Answer 1

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

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