动画 div 使 Edge/Safari repaint/layout parent 容器
Animating divs makes Edge/Safari repaint/layout parent container
我有以下场景：
- 同一个容器 (
#eventContainer) 中有几千个 div (.lifeevent)。它们正在被动画化并在每一帧期间改变它们的 left 和 top 属性，但彼此之间没有特别的关系（这使得动画 parent 容器而不是所有 child人不可能）。
- parent有
position: absolute，所有child人div也是position: absolute。
- 动画代码很简单（只改变child元素的style属性），使用requestAnimationFrame
- 在 Chrome
上工作顺利
- Near-impossible 在 Edge 和 Safari 上使用
- 使用 Edge 分析动画显示了数千个这样的布局事件：
所以我认为这里的问题是每个动画 div 都会使 parent 容器的布局重新评估。当这种情况每帧发生数千次时，它就会变慢也就不足为奇了。有谁知道为什么会这样？
性能问题的罪魁祸首是为每个动画元素触发浏览器布局（这反过来又导致父级布局繁重）。在使用 Chrome 时间轴工具调试后，我发现这是由于 "forced synchronous layouts" 造成的（在我的例子中是由于每个元素的 width/top/left 样式属性交替获取和设置） .可以找到处理强制同步布局的重要指南 here。它当然对我的问题有很大帮助。在处理好 gets/sets 发生的顺序后，所有动画元素的样式更新仅发生在一个布局中，这解决了 Edge 和 Safari 下的性能问题。
我有以下场景：
- 同一个容器 (
#eventContainer) 中有几千个 div (.lifeevent)。它们正在被动画化并在每一帧期间改变它们的left和top属性，但彼此之间没有特别的关系（这使得动画 parent 容器而不是所有 child人不可能）。 - parent有
position: absolute，所有child人div也是position: absolute。 - 动画代码很简单（只改变child元素的style属性），使用requestAnimationFrame
- 在 Chrome 上工作顺利
- Near-impossible 在 Edge 和 Safari 上使用
- 使用 Edge 分析动画显示了数千个这样的布局事件：
所以我认为这里的问题是每个动画 div 都会使 parent 容器的布局重新评估。当这种情况每帧发生数千次时，它就会变慢也就不足为奇了。有谁知道为什么会这样？
性能问题的罪魁祸首是为每个动画元素触发浏览器布局（这反过来又导致父级布局繁重）。在使用 Chrome 时间轴工具调试后，我发现这是由于 "forced synchronous layouts" 造成的（在我的例子中是由于每个元素的 width/top/left 样式属性交替获取和设置） .可以找到处理强制同步布局的重要指南 here。它当然对我的问题有很大帮助。在处理好 gets/sets 发生的顺序后，所有动画元素的样式更新仅发生在一个布局中，这解决了 Edge 和 Safari 下的性能问题。