为何含动画的元素使用backdrop-filter会导致性能开销过高？

在Chrome浏览器中，当元素使用backdrop-filter且内部包含动画时，会出现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：带有细条纹背景
• 内层div：使用backdrop-filter: blur，显示模糊的细条纹
• 最内层：带有opacity动画的绿色span

预期渲染流程与性能表现 #

我预期的渲染流程应包含三个合成层：

• 层1：带有细条纹背景的外层div
• 层2：使用backdrop-filter的div
• 层3：带有opacity动画的绿色span

opacity动画本应是低开销操作：仅需每帧执行一次合成步骤，不会触发布局重排或绘制。而backdrop-filter后方是静态背景，没有变化，所以不该产生性能影响，GPU进程的CPU占用应约5%、GPU占用约1%（和不使用backdrop-filter时一致）。

实际矛盾现象 #

Chrome开发者工具显示的情况符合预期：图层工具能看到上述三个合成层，10秒性能分析显示渲染和绘制耗时均为0ms，GPU基本处于空闲状态。但macOS活动监视器显示Chrome的GPU进程活动量远高于预期——在M2 MacBook上，CPU占用20%、GPU占用17%。

疑问 #

1. 这是怎么回事？
2. backdrop-filter是否在被重新计算？
3. 为何会出现这种情况？
4. 如何通过Chrome开发者工具找到答案？

内容的提问来源于stack exchange，提问作者jameshfisher