CSS 模糊滤镜性能答案

【问题标题】：CSS Blur Filter PerformanceCSS 模糊滤镜性能
【发布时间】：2018-02-17 22:17:21
【问题描述】：

我正在创建一个具有 ::after 元素的网站，该元素带有背景和 CSS3 模糊。我注意到应用 CSS3 模糊会对性能产生巨大的不利影响。

应用 CSS3 模糊后，大约有 10 到 20 帧/秒的下降（从 60fps 开始）。

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

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

所以，我的问题是，有没有使用滤镜的替代方法：在不使用图像编辑器的情况下模糊一个元素及其背景，从而获得更好的性能？

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

【问题讨论】：

您可以在画布上进行模糊处理，这样就不会有长期的 fps 问题。签出：creativejs.com/2011/12/day-5-blur-that-canvas
注意：@ericjbasti 的链接网站指的是四篇不再可用的文章。

标签： performance css

【解决方案1】：

我遇到了同样的问题。我决定尝试添加一个 CSS sn-p 用于提高 3d CSS 翻译的性能。有效！不知道为什么-如果有人可以启发我，我会很高兴。（可能只是 sn-p 导致 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);

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

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

【讨论】：

我目前还想模糊导航/菜单下拉菜单的背景。在移动设备上，你可以忘记模糊，除非你像以前那样做，is explained in this post on SmashingMagazine。仍在阅读这篇文章，但我认为你做对了，不是 100% 肯定，请查看文章，如果你想了解更多如何以及为什么它有效，值得你花时间确定。
还值得注意的是，这些值应该排在第一位。之后在选择器中使用您的动画值。在不透明度的情况下尝试了相反的方法，但在旧 S4 上不起作用，但是在开启 HA 时超级流畅，就像在全新设备上一样。
看起来只有背面的可见性很重要。刚刚测试。
我没有成功：/ Firefox 很慢。
transform: translateZ(0); 等规则会通知浏览器尽可能将工作转移到 GPU，从而减轻 CPU 的负担

【解决方案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，尤其是动画效果。

【讨论】：