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

Question

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

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

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

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

谢谢!

Answer 1

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

The signal that we use for frame boundaries is emitted when the compositor actually draws layers, and there are plenty of opportunities for the compositor to bail out before actually drawing, most common being the update being outside of view-port. So the flow in your case is likely as this:

• you invalidate styles;
• the main thread requests a frame from the impl side;
• the impl side begins a frame and requests a main thread frame;
• the main thread performs style recalc/layout/update layer tree;
• it turns out there are no invalidations within the visible area;
• frame is not drawn. (the above is repeated several times, then something is actually drawn, and at this point we mark next frame boundary in Timeline).

Comment by: Andrey Kosyakov

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

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

更新:

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

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