提高 SVG/CSS 微调器的性能

Question

我正在用新的 SVG/CSS 微调器替换 Ember.js 应用程序的旧 gif 微调器。

这是微调器，在我的项目中保存为.svg ：

http://codepen.io/FezVrasta/pen/pJXovM

我用这个 CSS 加载它：

background:       no-repeat center;
background-image: url(../images/spinner.svg);
background-size:  65px 65px;

问题是我的 Ember.js 应用程序在显示微调器时做了大量计算，这使得微调器滞后。

我曾尝试使用 b64.io 在 base64 中对 svg 进行编码，但唯一的收获是加载时间，性能相同。

如您所见，我已经尝试使用rotate3d而不是rotate来使用 GPU，但是我没有获得任何性能提升。

有什么建议可以改善它的流动性吗？ 欢迎提供良好的实践、技巧等。

Answer 1

这里的问题几乎肯定在于 Ember.js 应用程序，而不是微调器。

我会尝试熟悉一些分析工具，以找出 Ember 应用程序中导致滞后的原因。 我相信您可以采取一些步骤来提高应用程序的性能！

Answer 2

您可以使用纯 SVG 解决方案，使用 CSS，不需要 Javascript 这里是一个示例

 body { font-family: "Courier New", Courier, monospace; background-color: #333333; margin: 0px; padding: 0px; color: #e8e8e8; } a{ color: #e8e8e8; } .path { stroke-dasharray: 310; stroke-dashoffset: 280; animation: dash 2s linear infinite; } @keyframes dash { 0% { stroke-dashoffset: 280; } 25% { stroke-dashoffset: 15; } 100% { stroke-dashoffset: 280; } } .loader { animation: spin 1s linear infinite; } @keyframes spin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

 <div style=" display: flex; flex-direction: column; justify-content: space-around; align-items: center; height: 100vh;"> <svg class='loader' width="120" height="120"> <circle class="progress-ring__circle" stroke="#D9DDE4" stroke-width="10" stroke-linecap="round" fill="transparent" r="52" cx="60" cy="60"/> <circle class="path" stroke="#1a73e8" stroke-width="10" stroke-linecap="round" fill="transparent" r="52" cx="60" cy="60"/> </svg> <a href="https://codesandbox.io/s/ring-preloader-ui-opeso" target="_blank">👉[Customize your own ring preloader]👈</a> </div>