Chrome开发工具中的图层组成 [英] Layer composition in the chrome dev tools

问题描述

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

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?

推荐答案

在更新动画帧时始终会发出时间轴中的合成事件，您以前的假设是正确的。为了验证您的动画div是否真正成为该图层，请查找Paint事件-这些事件是针对每个图层的，并且如果一层相对于另一层进行了过渡，并且动画层中的内容不变，则动画过程中不应有任何Paint事件。另请注意，在最新版本的Chrome（m30 +）中，时间轴会显示与事件弹出窗口中的Paint关联的图层的根。

The Compositing event in Timeline is always emitted while updating the animation frame and your former assumption is correct. To validate whether your animated div actually became the layer, look for the Paint events -- these are per layer and there should not be any paint events during the animation if one layer is transitioned relatively to another, provided layer contents do not change. Note also that in recent versions of Chrome (m30+), Timeline shows root of the layer associated with the Paint in event's popover.

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

Another way to check whether your animated element was promoted to a layer is experimental Layers panel (Enable DevTools experiments in about:flags, restart Chrome, then enable Layers panel in the Experiments tab of DevTools' settings).

这篇关于Chrome开发工具中的图层组成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！