Javascript 设置div动画可使Edge/Safari重新绘制/布局父容器

我有以下情况：

• 在同一个容器（

  #eventContainer

  ）中有几千个div（

  .lifevent

  ）。它们正在被设置动画，并且在每个帧期间，它们的

  left

  和

  top

  属性都发生了更改，但彼此之间没有特定的关系（这使得无法设置父容器而不是所有子容器的动画）
• 父级具有

  position:absolute

  ，所有子级div也都是

  position:absolute

• 动画代码非常简单（仅更改子元素的样式属性），并使用requestAnimationFrame
• 在Chrome上运行平稳
• 几乎不可能在Edge和Safari上使用
• 使用Edge分析动画时，会显示数千个布局事件：

---

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

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

只需减少您的数量即可。带有附加动画的“几千”个实例将杀死最强大的系统。我对你的Chrome处理器印象深刻：）不可能。此外，动画发生在一个循环中，它不会单独附加到每个元素。此外，我真的很想了解为什么子div会在父级上产生层布局。您是否尝试过使用转换而不是设置

top

和

left

？是的，我有，出于某种原因，这些在Edge和Safari上的效果更差。我还将transform3d（0,0,0）与top/left结合使用，尽可能触发硬件加速。