Javascript SVG加载器赢得'；当有'；这是一个沉重的背景负荷。这能修好吗？

我正在使用一个基本的SVG加载器，而我的站点做一些繁重的JS工作，但它几乎没有动画。我可以在浏览器中设置优先权吗？我很高兴JS的执行速度慢了0.01秒，如果这意味着SVG可以正常运行的话

如果我将JS从我的站点中移除，svg将完美地动画化，但一旦JS运行，它几乎不会动画化。这是铬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>

谢谢

我相信这正是你需要的

web worker是在后台运行的JavaScript，不会影响页面的性能

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

您可以尝试CSS动画，而不是使用CSS动画（更好地支持）

圆圈{
动画：changeOpacity变量（--d）无限
}
@关键帧更改不透明度{
0%{填充不透明度：var（--a）}
50%{填充不透明度：var（--b）}
100%{填充不透明度：var（--c）}
}

我刚看了一下，上面说不能在web worker中进行DOM操作？我沉重的JS负载正在调整/隐藏大型

中的列，所以我不确定它是否适合我的用例？此外，这似乎有些过分，难道没有更简单的解决方案吗？例如，一个简单的解决方案似乎是将动画svg切换为动画gif。如果浏览器足够智能，可以让动画gif继续运行，为什么不能使用svg呢？我刚刚做错什么了吗？是的。DOM操作就是这样。在这种情况下，您必须优化js代码。另一个想法是你可以尝试用js制作动画（js是同步的，所以你可以控制首先应该做什么）是的，Gif是另一个机会。您的SVG对我来说还可以，只是繁重的js代码可能会影响页面性能。而且尝试谷歌chrome中的Performance devtool来分析你的js代码（如果你不熟悉youtube上的“了解”选项卡），我已经投票并接受了这一点，尽管我还没有实现它，因为我相信它总有一天会对某人有所帮助！我会重新考虑js。如果这影响了基本动画，您可能会做错什么。它可以在没有js的情况下完成，或者在一个隐藏的元素中完成？你能公布具体的操作方法吗？你应该关注你的js。那是我们可以帮忙的地方。在一篇评论中，你说你正在一张桌子上做大量的DOM操作。您可以通过requestAnimationFrame循环分批完成，这样您的图形就可以正确地更新，同时，尝试从文档中完成所有可以完成的工作，以避免大量的样式更改。但是如果你对你正在做的事情没有一个清晰的看法，很难进一步帮助你。关于你的最后一点，Kaido-我有可见性：隐藏直到操作完成。我希望这意味着我在代码执行期间不会得到样式重绘/重绘。。。希望如此。@Codemonkey不，Visibility hidden只会避免这些元素的绘制，但回流仍然会发生。我在这里使用cba提取相关的JS，但基本上我在一个页面上有十几个表。它们隐藏了可见性（并显示了我的svg动画），而我执行以下操作：我循环遍历它们，并在每个表的第一行上设置单元格宽度，以便所有列对齐。然后，我检查表的宽度与视口的宽度的比较，并系统地删除不太重要的列，直到合适为止。一旦这些都排序好了，我会让表格可见，并删除加载程序动画。如果用户愿意，可以通过切换来显示额外的列。如果SMIL由于js执行而无法正确设置动画，我担心CSS转换也会受到同样的影响。（此外，对SVG元素上CSS转换的支持也不是很好）。我现在尝试了这种方法，它没有真正的区别。