火狐浏览器：大模糊元素导致性能缓慢

Question

我在使用Firefox时遇到了一些小问题：当dom上有大型模糊元素显示时，一切都会变得非常缓慢。

我注意到了几件事：

• 在某些简略配置上，回流事件甚至会冻结标签页
• 在高端GPU上，FPS稍微好一些，所以我猜测这个滤镜是GPU激活的
• Chrome和Safari运行非常顺畅
• 即使没有动画，CPU使用率也非常高，任何交互都很卡顿

好的，请展示代码

确保点击扩展窗口，以便所有图像都能显示出来，否则动画将保持平稳。

我正在创建一个带有填充动画的回流事件，以故意加剧浏览器的压力，但整体交互会变得很卡顿。

在像CodePen这样更复杂的网页上，FPS要差得多：https://codepen.io/creaforge/pen/mLPqNg，即使不触发变换编辑，这支笔也显示了一些性能问题（尝试选择代码块）。

div {
  background-color: #eaeaea;
  transition: all .5s;
  padding: 20px;
}

div:hover {
  padding-bottom: 100px;
}

img {
  filter: blur(40px);
}

<div>Hover me --> slow animation</div><br/>

<img src="http://www.placecage.com/c/200/600">
<img src="http://www.placecage.com/c/200/610">
<img src="http://www.placecage.com/c/200/620">
<img src="http://www.placecage.com/c/200/630">
<img src="http://www.placecage.com/c/200/640">

- GuCier

---

不要在动画中使用填充(padding)，应该使用平移(translate)代替，因为使用填充会严重影响CPU使用率。 - Abslen Char

这是故意的，我会编辑问题以使其更精确！ - GuCier

我不确定问题出在哪里，但帮助Firefox开发人员的一个好方法是进行性能分析并提交错误报告！ - Dexter

谢谢Dexter，我之前不知道这个工具。我会进行更多测试，创建一个易于重现的测试用例，并提交错误报告。 - GuCier

这是一个Firefox的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=925025 - 如果你遇到了这个问题，请随时提醒我们！ - David

Answer 1

使用translate而不是padding。使用padding进行动画处理会对计算机造成相当大的负担。

- JXD

---

是的，我有意引起回流来压榨浏览器性能，但即使没有动画，任何交互都会变得非常缓慢。在这个代码片段中，在Firefox中编辑很卡顿，而在Chrome中则很流畅。只是打开该页面就会导致CPU使用率飙升15％（高端i7）。 - GuCier