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

标签： htmlcssfirefox

Answer 1

使用翻译而不是填充。使用填充动画对您的计算机来说非常繁重。