Firefox：大量模糊元素导致性能下降

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">

Answer 1

使用翻译而不是填充。使用填充制作动画对于您的计算机来说相当繁重。