【发布时间】：2016-04-26 14:57:32
【问题描述】：
我有以下场景：
- 在同一个容器 (
#eventContainer) 中有几千个 div (.lifeevent)。它们正在被动画化，并且它们的left和top属性在每一帧中都发生了变化，但彼此之间没有特别的关系（这使得动画父容器而不是所有子容器变得不可能）。 - 父级有
position: absolute，所有子级div也是position: absolute。 - 动画代码很简单（只改变子元素的style属性），使用requestAnimationFrame
- 在 Chrome 上流畅运行
- 几乎不可能在 Edge 和 Safari 上使用
- 使用 Edge 分析动画向我展示了数千个这样的 Layout 事件：
所以我认为这里的问题是每个动画 div 都会重新评估父容器的布局。当每帧发生数千次时，难怪它很迟钝。有谁知道为什么会这样？
【问题讨论】：
-
只需减少的数量。带有附加动画的“几千个”实例将杀死最强大的系统。我对你的 Chrome 处理这个印象深刻:)不可能。此外，动画发生在一个循环中，它不会单独附加到每个元素。此外，我真的很想了解为什么子 div 会导致父级上的图层布局。您是否尝试过使用 transforms 而不是设置
top和left？是的，我有，出于某种原因，这些在 Edge 和 Safari 上的效果更差。我还将 transform3d(0, 0, 0) 与 top/left 结合使用，以尽可能触发硬件加速。
标签： javascript css browser safari microsoft-edge