时间戳

首页 > 解决方案 > 在模糊背景上播放动画时会大量使用 GPU

javascript - 在模糊背景上播放动画时会大量使用 GPU

问题描述

考虑到来自 calibreapp.com 的这一段：

浏览器通过在位置、缩放、旋转和不透明度上为具有 CSS 过渡或动画的元素创建单独的层来进行优化。当您在自己的图层上有一个动画元素时，移动它不会影响周围元素的位置，唯一移动的是该图层。这样浏览器就可以避免重绘并且只进行合成。

现在想象我们想要模糊整个背景，模糊动画开始进行，最后结束，好吗？

现在在这个模糊的背景上，我们想要添加一个简单的缩放动画，如下所示：（注意这是一个单独的 div，与我们已经模糊的背景没有任何联系）

.beaton {
  animation: beatonAnime .5s infinite alternate;
}

@keyframes beatonAnime {
  0%   { transform: scale(1); }
  100% { transform: scale(0.96); }
}

令人困惑的问题是：

如果没有那个模糊的背景，我会得到1-2% 的 GPU 使用率。

有了那个模糊的背景（现在没有动画，几秒钟前就完成了），我得到了68% 的 GPU 使用率！！！

正如段落所说，我们不应该看到这两者之间有任何区别，因为当我们添加缩放动画并且它们位于单独的图层中时，背景的模糊动画没有运行。

这是实时示例的链接：（注意 GPU 不是 CPU 使用率）

https://langfox.ir/test/beat/index.html

顺便说一下，这是背景上的模糊动画：

.overlay {
  animation: overlayShow 0.25s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes overlayShow {
  from {
    backdrop-filter: blur(0);
    background-color: rgba(35, 33, 36, 0);
  }
  to {
    backdrop-filter: blur(80px);
    background-color: rgba(35, 33, 36, 0.7);
  }
}

有什么解决办法吗？

注意：当我使用filter: blur(80px)而不是backdrop-filter: blur(80px);. 那么背景滤镜有什么问题呢？

标签： javascripthtmlcss

解决方案

推荐阅读