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

Question

我有以下场景:

• 在同一容器 (#eventContainer) 中有几千个 div (.lifeevent)。它们正在被动画化，并且在每一帧期间更改它们的 left 和 top 属性，但彼此之间没有特别的关系(这使得动画父容器而不是所有子容器不可能)。
• 父级 position: absolute 并且所有子 div 也是 position: absolute。
• 动画代码很简单(只改变子元素的style属性)，使用requestAnimationFrame
• 在 Chrome 上流畅运行
• 几乎不可能在 Edge 和 Safari 上使用
• 使用 Edge 分析动画显示了数千个这样的布局事件:

所以我认为这里的问题是每个动画 div 都会使父容器的布局重新评估。当这种情况每帧发生数千次时，它就会变慢也就不足为奇了。有谁知道为什么会这样？

Answer 1

性能问题的罪魁祸首是为每个动画元素触发浏览器布局(这反过来又导致父级布局繁重)。在使用 Chrome 时间轴工具进行调试后，我发现这是由于“强制同步布局”(在我的例子中是由于在每个元素的宽度/顶部/左侧样式属性上交替获取和设置)而发生的。可以找到处理强制同步布局的重要指南 here .它当然对我的问题有很大帮助。在处理好 gets/set 发生的顺序后，所有动画元素的样式更新仅发生在一个布局中，这解决了 Edge 和 Safari 下的性能问题。