javascript - 当背景 JS 负载很重时，SVG 加载器将无法正确设置动画。这是可以修复的吗？

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

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

A web worker is a JavaScript running in the background, without affecting the performance of the page.

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