Chrome中单个框架中的重复事件

Question

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

​

​

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

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

为什么我会看到这些事件重复发生？对于Chrome来说，在同一帧中重做这项工作似乎效率很低，所以我想了解其中的原因。

谢谢!

Answer 1

之前在谷歌论坛上也曾问过类似的问题，所以我引用了下面的解释：

我们用于帧边界的信号是在排字程序实际绘制层时发出的，在实际绘制之前，排序程序有大量的机会退出，最常见的是在视图端口之外的更新。因此，在您的情况下，流很可能如下：

• 你使风格失效；
• 所述主螺纹从所述驱动侧请求框架；
• 推动侧开始一个框架，并请求一个主螺纹框架；
• 主线程执行样式重新计算/布局/更新层树；
• 结果显示，在可见区域内没有失效；
• 框架未绘制。(上面的内容重复了几次，然后实际绘制了一些东西，此时我们在时间线中标记下一个帧边界)。

评论： Andrey Kosyakov

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

据我所知，无效样式是决定哪些元素需要重新计算其计算样式的过程。这是通过以后代失效集的形式存储元素之间关系的元数据来实现的。

更新：

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

​

​

我看不出为什么作曲家会放弃，但我不太熟悉这个复杂的细节。有点复杂。

​

​