我正在创建svg艺术品的网站上工作，这意味着您可以动态添加元素，缩放，颜色并移动它们。
事情是，当你开始在它们上面施加阴影时，一切都将开始变慢。对于这方面的现场演示，this是我正在处理的网站。
我制作了一个能够准确显示问题的codepen，尝试向下滚动this codepen中的窗口。
myappbody {
margin: 0;
}
现在，我试着看看问题是什么，但我的知识有限。我确信这是造成这种情况的阴影，因为它只在阴影出现时冻结。
同样重要的是要知道我让用户根据谷歌素材从5个不同的阴影中进行选择，阴影等级越高，它就越冻结。我也在使用Snap SVG，但我不认为这与它有任何关系。
任何想法都非常感谢大家。
答案 0 :(得分：0)
第一个问题：
您指定filterUnits=userSpaceOnUse，但之后您没有指定过滤器应使用的维度。这导致未定义的行为。在Chrome上，似乎它将过滤器区域设置为每个过滤器的整个viewBox - 这导致疯狂的慢速性能。删除filterUnits声明并将过滤器区域设置为x / y = -50％和height / width =“200％”，您将获得更好的性能。即。
<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">
有了这个，你仍然有点慢，但至少你可以滚动页面！
第二个问题：
你正在进行大量的合成和模糊操作，并且合成很慢（至少在Chrome中 - 它们在Edge中非常快）。你应该做一个模糊，然后用feComponentTransfer / feFuncA塑造不透明度，而不是做多个单独的模糊和合成它们。您可以从我为Drophadows构建的滤镜生成器中了解如何执行此操作，您可以在此处看到：
http://codepen.io/mullany/pen/sJopz
调整展开和大小滑块，看看生成的代码如何变化。
所有这一切，复杂的SVG过滤器可能很慢，周期。我希望Chrome团队可以加速GPU加速，但不幸的是，他们似乎只关注加速CSS滤镜效果所使用的东西。