javascript - 隐藏/模糊的 SVG 动画是否仍会导致浏览器重绘和/或性能问题？

Question

我正在考虑将 SVG 微调器动画放在我正在加载的一些图像后面，然后将图像堆叠在微调器的顶部，以便在加载图像时微调器被遮挡。计划将其应用于可能包含数百个元素的 ListView 。

第一个问题是，被遮挡的 SVG 微调器(一旦加载了各自的图像)是否会继续导致浏览器重新绘制？ (听起来很贵)

如果是，下一个问题是，如果我在图像加载时隐藏(display: none)微调器，隐藏的微调器会继续导致重绘吗？

非常欢迎任何其他性能想法。

FWIW，这是一个 Electron 应用程序，因此 Chromium(一个相对最新的版本)是我们唯一关心的浏览器。

Answer 1

这让我感兴趣...使用 example SVG我把这个测试放在一起(请原谅代码是多么困惑):

document.onclick = function() {
  output.innerHTML += (mySVG.innerHTML + output.innerHTML).replace(/<circle /g,"<circle style='opacity: 0' ");
  preview.innerHTML += mySVG.innerHTML;
}

<div id="mySVG">
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dual-ring">
    <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="40" stroke-width="4" stroke="#facd9e" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(115.488 50 50)">
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </circle>
    <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="35" stroke-width="4" stroke="#389798" stroke-dasharray="54.97787143782138 54.97787143782138" stroke-dashoffset="54.97787143782138" transform="rotate(-115.488 50 50)">
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </circle>
  </svg>
</div>
<div id="output"></div>
<div id="preview"></div>

如您所见，当您在文档上单击很多次时，所有完全透明的旋转圆圈开始减慢浏览器渲染速度。看起来动画仍然会触发。

在这个使用 display: none; 的例子中，我们得到了相同的结果，div#preview 明显变慢了:

document.onclick = function() {
  output.innerHTML += (mySVG.innerHTML + output.innerHTML).replace(/<circle /g,"<circle style='display: none' ");
  preview.innerHTML += mySVG.innerHTML;
}

<div id="mySVG">
<svg width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dual-ring">
    <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="40" stroke-width="4" stroke="#facd9e" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(115.488 50 50)">
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </circle>
    <circle cx="50" cy="50" fill="none" stroke-linecap="round" r="35" stroke-width="4" stroke="#389798" stroke-dasharray="54.97787143782138 54.97787143782138" stroke-dashoffset="54.97787143782138" transform="rotate(-115.488 50 50)">
      <animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform>
    </circle>
  </svg>
</div>
<div id="output"></div>
<div id="preview"></div>