动画div使Edge / Safari重绘/布局父容器

Question

我有以下情况：

• 在同一个容器（.lifeevent）内有几千个div（#eventContainer）。它们是动画的，并且在每个帧中都更改了left和top属性，但彼此没有特别的关系（这使得父容器的动画而不是所有子项都不可能）。
• 父母有position: absolute，所有子div也是position: absolute。
• 动画代码非常简单（只更改子元素的样式属性）并使用requestAnimationFrame
• 在Chrome上顺利运作
• 几乎不可能在Edge和Safari上使用
• 使用Edge分析动画显示了数以千计的布局事件：

所以我认为这里的问题是每个动画div都会重新评估父容器的布局。当每帧发生数千次时，毫无疑问它会变得迟钝。有谁知道为什么会这样？

Answer 1

性能问题的罪魁祸首是触发了每个动画元素的浏览器布局（这反过来又导致了父级的重布局）。在使用Chrome时间线工具进行调试后，我发现这是因为“强制同步布局”（在我的情况下由于在每个元素的宽度/顶部/左侧样式属性上交替获取和设置）。可以找到处理强制同步布局的一个很好的指南here。它对我的问题肯定帮了我很多忙。在处理了get / sets发生的顺序之后，所有动画元素的样式更新只发生在一个布局上，这解决了Edge和Safari下的性能。