Загрузчик SVG не будет правильно анимироваться при большой загрузке JS в фоновом режиме.Это поправимо?

Question

Я использую простой загрузчик SVG, в то время как мой сайт выполняет тяжелую работу с JS, но вряд ли он оживляет.Могу ли я сделать что-то, чтобы дать этому приоритет в браузере?Я очень рад, что выполнение 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

Вместо использования 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>

Answer 2

Я считаю, Web Workers - это именно то, что вам нужно!

Веб-работник - это JavaScript, работающий в фоновом режиме, не влияющий на производительность страницы.

Вам нужно извлечь из него свой тяжелый js-код, чтобы повысить производительность страницы.