Performance CSS模糊过滤器性能

我正在创建一个网站，它有一个：：after元素，并应用了backgound和CSS3模糊。我注意到应用CSS3模糊对性能有巨大的不利影响

应用CSS3模糊后，大约每秒下降10-20帧（从60fps开始）

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

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

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

ps，

---

我不介意使用javascript、jquery、css或html元素。

我也遇到了同样的问题。我决定尝试添加一个CSS片段，用于提高3d CSS翻译的性能。成功了！不知道为什么-我希望有人能启发我。（可能只是该片段导致GPU光栅化？）

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

---

我只做了非常有限的测试；如果有人想做一些严格的基准测试或提供一些关于这个问题的见解，我们将不胜感激

@ericjbasti的评论很有用：

我补充说

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

然后在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();

然后，我能够在css中使用animation@keyframes设置.canvaswrapper div的动画。您可以使用var image=new image（）；在画布上，然后模糊它

---

性能比在CSS中使用模糊要好，尤其是在动画中。

您可以通过画布进行模糊，而不会出现长期的fps问题。检查：我目前还想在导航/菜单下拉菜单上模糊背景。在移动设备上，你可以忘记模糊，除非你像以前那样做。我仍然在看这篇文章，但我认为你是对的，不是100%确定，检查这篇文章，如果你想知道更多这是如何工作的以及为什么工作的话，肯定值得你花时间。同样值得注意的是，这些值应该放在第一位。之后，在选择器中使用动画值。尝试了另一种方法，不透明度，在旧的S4上不起作用，但是HA打开了超级平滑，就像在一个全新的设备上一样。看起来只有背面的可见性才重要。刚刚测试过。我没有成功：/Firefox非常慢。规则如

transform:translateZ（0）如果可能，通知浏览器将工作转移到GPU，这将减轻CPU的负载
.canvaswrapper{position: relative;}

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

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();