CSS模糊滤镜性能

Question

我正在创建一个网站,其中包含带有背景和CSS3模糊的:: after元素.我注意到应用CSS3模糊对性能有很大的不利影响.

应用CSS3模糊后,大约有10 - 20帧/秒的下降(从60fps).

我使用CSS3滤镜来应用模糊的原因是因为这是应用于我想要模糊的图像的通用代码,即我不想使用图像编辑器手动模糊图像.

.blur::after {
    background-image:url(dog.png);
    filter:blur(3px);
}

所以,我的问题是,是否有使用过滤器的替代方法:在不使用图像编辑器的情况下模糊具有更好性能的元素及其背景？

ps,我不介意使用javascript,jquery,css或html元素.

Answer 1

我遇到了同样的问题.我决定尝试添加一个用于提高3d CSS翻译性能的CSS代码段.有效!不知道为什么 - 如果有人能开导我,我会很高兴.(可能只是片段引发了GPU光栅化？)

-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
transform: translate3d(0,0,0);
transform: translateZ(0);

请注意,我将这些样式应用于覆盖模糊元素的元素.

我只进行了非常有限的测试; 如果有人想做一些严格的基准测试或对这个问题提供一些见解,我们将不胜感激.

Answer 2

@ericjbasti的评论很有用：

我加了

<canvas id="myFogCanvas"></canvas>

然后在scss中

.canvaswrapper{position: relative;}

#myFogCanvas{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

然后在js

var canvas = document.getElementById("myFogCanvas");
var ctx = canvas.getContext('2d');
//all the drawing stuff for canvas ... moveTo, lineTo, etc.
ctx.filter = 'blur(15px)';
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
ctx.lineWidth = 5;
ctx.stroke();

然后我就可以使用动画@keyframes在CSS中为.canvaswrapper div设置动画。您可以使用var image = new Image（）; 在画布上，然后使其模糊。

与CSS中使用模糊效果相比，该性能要好WAAAYYYY，尤其是在动画方面。