Firefox：大型模糊元素的性能缓慢

Posted 2023-03-06

【中文标题】Firefox：大型模糊元素的性能缓慢

【英文标题】：Firefox: Slow performance with large blurred elements

【发布时间】：2018-10-04 22:50:27

【问题描述】：

我在使用 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">

【问题讨论】：

动画不要使用padding，用translate代替，使用padding会严重影响CPU使用率

这是故意的，我会更准确地编辑问题！

我不确定问题出在哪里，但帮助 Firefox 开发人员的一个好方法是使用 performance profile 和 file a bug！

谢谢 Dexter 我不知道这个工具。我会再做一些测试，创建一个易于重现的测试用例并提交错误

这是一个 firefox 错误：bugzilla.mozilla.org/show_bug.cgi?id=925025 - 如果您遇到此问题，请随意修改！

【参考方案1】：

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

【讨论】：

是的，我故意造成重排给浏览器带来压力，但即使没有动画，任何交互都非常缓慢。在this pen 上编辑在 Firefox 中很慢，在 Chrome 中很流畅。只需打开页面（高端 i7），我就获得了 15% 的 CPU 跳跃