当后台 JS 负载较重时，SVG 加载器将无法正确设置动画。这是可以修复的吗？

Question

当我的网站做一些繁重的JS工作时，我正在使用基本的SVG加载器，但它几乎没有动画。 我可以做一些事情来在浏览器中赋予它的优先级吗？ 我很高兴 JS 执行速度慢 0.01 秒，如果这意味着 SVG 将正确动画化。

如果我从我的网站中删除 JS，svg 可以完美地动画化，但是一旦 JS 运行，它几乎不会动画化。 这是在Chrome 69中。

这是 svg 文件：

<svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
<circle cx="5"  cy="5"  r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="2s"   values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="5"  cy="21" r="5" fill-opacity=".2"><animate attributeName="fill-opacity" begin="0s" dur="1.8s" values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="5"  cy="37" r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.6s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="5"  r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="21" r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.2s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="21" cy="37" r="5" fill-opacity=".2"><animate attributeName="fill-opacity" begin="0s" dur="1.4s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="5"  r="5" fill-opacity=".4"><animate attributeName="fill-opacity" begin="0s" dur="1.6s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="21" r="5" fill-opacity=".6"><animate attributeName="fill-opacity" begin="0s" dur="1.8s" values=".8;.1;.8" calcMode="linear" repeatCount="indefinite"/></circle>
<circle cx="37" cy="37" r="5" fill-opacity=".8"><animate attributeName="fill-opacity" begin="0s" dur="2s"   values=".1;.8;.1" calcMode="linear" repeatCount="indefinite"/></circle>
</svg>

谢谢！

Answer 1

我相信Web Workers正是您所需要的！

Web Worker 是在后台运行的 JavaScript，不会影响页面的性能。

您需要将繁重的 js 代码提取到其中，以便提高页面性能。

Answer 2

与其使用SMIL动画，不如尝试CSS动画(更好地支持(

circle{
animation:changeOpacity var(--d) infinite
}
@keyframes changeOpacity{
0%{fill-opacity:var(--a)}
50%{fill-opacity:var(--b)}
100%{fill-opacity:var(--c)}
}

<svg width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
<circle cx="5"  cy="5"  r="5" style="--a:.8;--b:.1;--:.8;--d:1.8s"></circle>
<circle cx="5"  cy="21" r="5" style="--a:.1;--b:.8;--:.1;--d:1.8s"></circle>
<circle cx="5"  cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:1.6s"></circle>
<circle cx="21" cy="5"  r="5" style="--a:.1;--b:.8;--:.1;--d:1.4s"></circle>
<circle cx="21" cy="21" r="5" style="--a:.8;--b:.1;--:.8;--d:1.2s"></circle>
<circle cx="21" cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:1.4s"></circle>
<circle cx="37" cy="5"  r="5" style="--a:.8;--b:.1;--:.8;--d:1.6s"></circle>
<circle cx="37" cy="21" r="5" style="--a:.8;--b:.1;--:.8;--d:1.8s"></circle>
<circle cx="37" cy="37" r="5" style="--a:.8;--b:.1;--:.8;--d:2s"></circle>
</svg>