Question

我用新的SVG / CSS微调器取代了Ember.js应用程序的旧gif微调器。

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

我用这个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应用程序，而不是旋转器。

我会尝试熟悉一些profiling tools来弄清楚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>

提高SVG / CSS微调器的性能

2 个答案: