页面加载期间SVG动画优先级

Question

在页面加载期间，我的网站上有一个 SVG 动画叠加层。当所有内容加载完毕后，它会被隐藏。如何让动画运行流畅？当浏览器分配资源来加载页面的其余部分时，我宁愿加载时间长一点，也不愿让动画卡顿。

<div id="loading-animation" style="display: block; position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: #fff; z-index: 100000">
  <img src="images/loader.svg" alt="" style="width: 256px; height: 256px; left: calc(50% - 128px); top: calc(50% - 128px); position: absolute">
</div>

Answer 1

假设你的 SVG 动画是一个简单的旋转运动（问题不清楚）...

不要使用动画 SVG，而是使用静态 SVG，并应用 CSS 过渡使其旋转。

CSS：

#loading-animation > img {
    animation: spin 0.7s linear infinite;
}

@keyframes spin { 
    100% { transform: rotate(360deg); } 
}

CSS 转换通常不会被 JavaScript 处理阻止，并尽可能利用硬件加速。

或者，您可以使用 GIF - 尽管在质量和文件大小方面存在缺点，但它们往往不会被处理阻塞。

最后，您可以尝试将任何 JavaScript 处理推迟到 web worker 以避免阻塞主线程，尽管这可能会更费力。