为什么背景滤镜对于包含动画的元素来说很昂贵？

Question

当某个元素具有

backdrop-filter

并且其中包含任何动画内容时，我会在 Chrome 中看到大量的 CPU 和 GPU 使用率。这对我来说没有意义，因为

backdrop-filter

仅当其背后发生变化时才需要重新计算。

举这个例子：

@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

<div style="
      background: repeating-linear-gradient(
        to right,
        #fff,
        #fff 10px,
        #aaa 10px,
        #aaa 20px
      );
      height: 100px;
    ">
  <div style="backdrop-filter: blur(3px)">
    <div style="width: 50px; height: 50px; background: red">
      <span style="
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: green;
            animation: pulse 2s ease-in-out infinite;
          "></span>
    </div>
  </div>
</div>

该页面有：

• 外部

  div

  带有细条纹背景。
• 其中有一个带有

  background-filter: blur

  的 div。它显示模糊的细条纹。
• 在 that 中，有一个带有动画

  opacity

  的绿色 div。

这就是我期望渲染这个的情况。我们将得到三个合成层：

• 第 1 层：外部 div，细条纹背景。
• 第 2 层：带有

  background-filter

  的 div。
• 第 3 层：带有动画

  opacity

  的 div。

动画

opacity

应该很便宜：它应该导致每帧一次合成步骤。不应该有布局/回流或绘画。

我预计

background-filter

不会对性能产生任何影响。仅当模糊背景下面的图层发生变化时，才应重新计算模糊背景 - 这种情况不会发生，因为它只是其下面的静态背景。 GPU 进程应该在 5% CPU 和 1% GPU 左右（没有时使用的量

background-filter

）。

事实上，这就是 Chrome 开发工具声称所发生的一切。图层工具显示了这三个图层，10 秒的性能配置文件显示渲染时为 0 毫秒，绘画时为 0 毫秒，并声称 GPU 基本上处于空闲状态。

然而 macOS 活动监视器显示 GPU 进程中的更多活动。在我的 M2 MacBook 上，Chrome 的 GPU 进程使用了 20% CPU 和 17% GPU。

它在做什么？

backdrop-filter

是否正在重新计算？为什么？如何使用 Chrome 开发工具找到答案？

Answer 1

我可以回答其中一些问题：

如何使用 Chrome 开发工具找到答案？

单击右上角的菜单，在更多工具下，选择渲染。
打开油漆闪烁

背景滤镜是否被重新计算？

我不确定重新计算是什么意思，但是页面中没有元素需要重新绘制，如使用油漆闪烁所示。