Chrome中单个帧中的重复事件

Posted 2023-03-07

【中文标题】Chrome中单个帧中的重复事件

【英文标题】：Duplicate events in a single frame in Chrome

【发布时间】：2016-12-17 12:31:43

【问题描述】：

我正在 Mac 上的 Chrome 中测试一个次优但非常简单的 CSS 动画。在开发工具中，我看到“重新计算样式”和后续活动在单个框架中执行了多次。 “更新层树”被调用了 3 次。

我在 Windows 上的 Chrome 中没有看到这种行为。我也没有在 Firefox 中看到类似的行为。

这是我正在使用的简单演示：http://s.codepen.io/lonekorean/debug/44cf0a50e321de7ec7ff4fac5d3f4514

为什么我看到这些事件重复出现？ Chrome 在同一帧中重做这项工作似乎效率很低，所以我想了解原因。

谢谢！

【参考方案1】：

之前在 Google 论坛上也有人问过类似的问题，所以我引用了下面给出的解释：

我们用于帧边界的信号在 compositor 实际上会绘制图层，并且有很多 合成师在实际绘图之前有机会退出， 最常见的是更新在视口之外。所以流量 在你的情况下可能是这样的：

您使样式无效； 主线程从 impl 端请求帧； impl 端开始一个框架并请求一个主线程框架； 主线程执行样式重新计算/布局/更新层树； 事实证明，可见区域内没有失效； 未绘制框架。 （上面重复了几次，然后就真的画了一些东西，此时我们标记下一帧 时间轴中的边界）。

评论人： Andrey Kosyakov

来源： https://groups.google.com/forum/#!topic/google-chrome-developer-tools/JaWHxD6oaXU

据我了解，使样式无效是决定哪些元素需要重新计算其计算样式的过程。这是通过以Descendant Invalidation Sets 的形式存储元素之间关系的元数据来完成的。

更新：

我可以在 Chrome for Windows 上复制相同的行为，如下所示：

我看不出有什么理由让合成器退出，但我对其中的复杂细节不太熟悉。有点复杂。

【讨论】：

嗯，我正在制作动画的任何内容都不会出现在视口之外。但是从您链接的文档中，即使不需要，树的某些部分也可能无效？仍然困惑为什么这不会在 Windows 上发生。

@lonekorean 我能够在 Windows 版 Chrome 中复制它。请参阅上面的更新。

感谢 Gideon，这实际上让我感觉更好，这也可以在 Windows 中发生。 :) 似乎有很多因素（内存、CPU、GPU 等）可能会影响 Chrome 的确切渲染行为。我认为存在连续动画的事实会导致 Chrome 每帧重新计算多次？它仍然每帧只绘制一次，这是我所期望的。