隠された/隠れたSVGアニメーションは依然としてブラウザの再描画やパフォーマンスの問題を引き起こしますか？

Question

イメージがロードされているときにSVGスピナーアニメーションを配置し、イメージがロードされたときにスピナーが覆い隠されるようにイメージをスピンナーの上に積み重ねることを検討しています。潜在的に何百ものアイテムを含むリストビューにこれを適用する計画。

最初の質問は、隠されたSVGスピナー（一度画像が読み込まれると）がブラウザを再描画し続けることですか？

「はい」の場合は、イメージが読み込まれるときにスピナーを非表示にすると、隠れたスピナーが再描画を続行しますか？

その他のパフォーマンスの考えは大歓迎です。

FWIW、これは電子アプリですので、Chromium（比較的最新のバージョン）が私たちが関係する唯一のブラウザです。

Answer 1

これは私が一緒にこのテスト（コードは言い訳どのようscrummy）ホイップ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>