optimization - 使用阴影时 SVG 变慢

Question

我在一个网站上工作，您可以在其中创建 svg 艺术品，这意味着您可以动态添加元素、缩放、颜色并移动它们。

问题是，当你开始在他们身上施加阴影时，一切都会开始变慢。对于这个的现场演示，this是我正在开发的网站。

我做了一个代码笔，它准确地显示了问题，尝试在 this codepen 中向下滚动窗口.

body {
  margin: 0;
}

<!-- this SVG is created using the free tool over at www.material101.com -->

<svg height="1080" width="1920">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="shadow-1">
      <feFlood flood-opacity="0.12" flood-color="rgb(0,0,0)" result="flood" id="feFlood4286" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4288" />
      <feGaussianBlur in="composite" stdDeviation="1.5" result="blur" id="feGaussianBlur4290" />
      <feOffset dx="0" dy="1" result="offset" id="feOffset4292" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4294" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4332" />
      <feFlood id="feFlood4334" flood-opacity="0.24" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4336" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4338" in="composite" stdDeviation="1" result="blur" />
      <feOffset id="feOffset4340" dx="0" dy="1" result="offset" />
      <feComposite id="feComposite4342" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-2">
      <feFlood flood-opacity="0.16" flood-color="rgb(0,0,0)" result="flood" id="feFlood4348" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4350" />
      <feGaussianBlur in="composite" stdDeviation="3" result="blur" id="feGaussianBlur4352" />
      <feOffset dx="0" dy="3" result="offset" id="feOffset4354" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4356" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4358" />
      <feFlood id="feFlood4360" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4362" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4364" in="composite" stdDeviation="3" result="blur" />
      <feOffset id="feOffset4366" dx="0" dy="3" result="offset" />
      <feComposite id="feComposite4368" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-3">
      <feFlood flood-opacity="0.19" flood-color="rgb(0,0,0)" result="flood" id="feFlood4377" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4379" />
      <feGaussianBlur in="composite" stdDeviation="10" result="blur" id="feGaussianBlur4381" />
      <feOffset dx="0" dy="10" result="offset" id="feOffset4383" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4385" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4387" />
      <feFlood id="feFlood4389" flood-opacity="0.23" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4391" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4393" in="composite" stdDeviation="3" result="blur" />
      <feOffset id="feOffset4395" dx="0" dy="6" result="offset" />
      <feComposite id="feComposite4397" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-4">
      <feFlood flood-opacity="0.25" flood-color="rgb(0,0,0)" result="flood" id="feFlood4421" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4423" />
      <feGaussianBlur in="composite" stdDeviation="14" result="blur" id="feGaussianBlur4425" />
      <feOffset dx="0" dy="14" result="offset" id="feOffset4427" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4429" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4431" />
      <feFlood id="feFlood4433" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4435" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4437" in="composite" stdDeviation="5" result="blur" />
      <feOffset id="feOffset4439" dx="0" dy="10" result="offset" />
      <feComposite id="feComposite4441" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
    <filter filterUnits="userSpaceOnUse" id="shadow-5">
      <feFlood flood-opacity="0.3" flood-color="rgb(0,0,0)" result="flood" id="feFlood4451" />
      <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1" id="feComposite4453" />
      <feGaussianBlur in="composite" stdDeviation="19" result="blur" id="feGaussianBlur4455" />
      <feOffset dx="0" dy="19" result="offset" id="feOffset4457" />
      <feComposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic" id="feComposite4459" />
      <feColorMatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0" id="feColorMatrix4461" />
      <feFlood id="feFlood4463" flood-opacity="0.22" flood-color="rgb(0,0,0)" result="flood" in="fbSourceGraphic" />
      <feComposite id="feComposite4465" in2="fbSourceGraphic" in="flood" operator="in" result="composite1" />
      <feGaussianBlur id="feGaussianBlur4467" in="composite" stdDeviation="6" result="blur" />
      <feOffset id="feOffset4469" dx="0" dy="15" result="offset" />
      <feComposite id="feComposite4471" in2="offset" in="fbSourceGraphic" operator="over" result="composite2" />
    </filter>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="#e57373" />
  <rect x="0" y="0" width="200" height="200" fill="#c62828" transform="matrix(9,0,0,8,-675,-436)" filter="url('#shadow-3')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(0,0,5.0354,4.8626,-172.7689,-111.1304)" filter="url('#shadow-5')" style="cursor: pointer;" />
  <rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.309,-0.9511,0.9511,-0.309,892.796,543.0074)" style="cursor: pointer;" />
  <rect x="0" y="0" width="200" height="200" fill="#e53935" transform="matrix(-0.0698,-1.9988,1.9988,-0.0698,307.1017,1179.8581)" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(7.1281,-3.6319,1.816,3.564,519.7993,260.3949)" filter="url('#shadow-4')" style="cursor: pointer;" />
  <polygon points="0,0,50,100,100,0" fill="#e53935" x="0" y="0" transform="matrix(1.8794,-0.684,3.0782,8.4572,26.1217,-24.6597)" filter="url('#shadow-5')" style="cursor: pointer;" />
  <polygon points="0,0,50,100,100,0" fill="#b71c1c" x="0" y="0" transform="matrix(6.6574,-2.1631,0.618,1.9021,-27.7715,158.0503)" style="cursor: pointer;" filter="url('#shadow-2')" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(0,0,8.9658,0.7844,103.7124,131.7799)" filter="url('#shadow-1')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#e53935" x="0" y="0" transform="matrix(-2.8191,1.0261,-1.7101,-4.6985,369.4589,394.6201)" filter="url('#shadow-4')" style="cursor: pointer;" />
  <circle cx="50" cy="50" r="50" fill="#ef5350" x="0" y="0" transform="matrix(1.8264,-0.1598,0.1648,1.8842,381.5187,128.4891)" filter="url('#shadow-3')" style="cursor: pointer;" />
</svg>

现在，我试着看看问题是什么，但我的知识有限。我确信是阴影导致了这种情况，因为它只在存在阴影时才会卡住。

同样重要的是要知道，我让用户从 5 种不同的阴影中进行选择，基于 google Material ，并且阴影级别越高，它卡住的越多。我也在使用 Snap SVG，但我认为这与它没有任何关系。

任何想法都非常感谢伙计们。

Answer 1

第一个问题:

您指定 filterUnits=userSpaceOnUse ，但是您没有指定过滤器应使用的尺寸。这会导致未定义的行为。在 Chrome 上，似乎将过滤器区域设置为每个过滤器的整个 View 框 - 这导致性能异常缓慢。删除 filterUnits 声明并将过滤器区域设置为 x/y=-50% 和 height/width ="200%"，您将获得更好的性能。 IE。

<filter id="shadow-n" x="-50%" y="-50%" width="200%" height="200%">

有了这个，你还是有点慢，但至少你可以滚动页面!

第二个问题:

你正在做很多合成和模糊操作，合成很慢(至少在 Chrome 中 - 它们在 Edge 中相当快)。与其做多个单独的模糊并合成它们，不如做一个模糊，然后用 feComponentTransfer/feFuncA 塑造不透明度。您可以从我为阴影构建的过滤器生成器中了解如何执行此操作，您可以在此处看到:

http://codepen.io/mullany/pen/sJopz

调整展开和大小 slider ，看看生成的代码如何变化。

尽管如此，复杂的 SVG 过滤器可能会很慢。我一直希望 Chrome 团队对它们进行 GPU 加速，但不幸的是，他们似乎只关注加速 CSS 滤镜效果使用的东西。