chrome dev工具中的图层组合

JAr*_*Are 2 chromium google-chrome-devtools

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

小智 9

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

检查您的动画元素是否已升级为图层的另一种方法是实验"图层"面板(在about:flags中启用DevTools实验,重新启动Chrome,然后在DevTools设置的"实验"标签中启用"图层"面板).