Est-ce que les animations SVG masquées/obscurcies causent toujours des problèmes de repeints et de performances?

Question

Je songe à mettre une animation spinner SVG derrière certaines images que je charge et à empiler l'image sur le spinner afin que le spinner soit obscurci quand l'image est chargée. Planification de l'appliquer à une vue de liste avec potentiellement des centaines d'éléments.

La première question est, est-ce que le spinner SVG obscurci (une fois que l'image correspondante sera chargée) continuera à repeindre le navigateur? (Cela semble cher)

Si oui, la question suivante serait, si je cache (display: none) le filateur lorsque l'image se charge, le fileur caché continuera-t-il à repeindre?

Toutes les autres idées de performance sont les bienvenues. FWIW, c'est une application Electron, donc Chromium (une version relativement à jour) est le seul navigateur qui nous intéresse.

Answer 1

Cela m'a intéressé ... en utilisant un example SVG je fouetté ensemble ce test (excuse comment scrummy le code est):

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>

Comme vous pouvez le voir, lorsque vous cliquez sur beaucoup Sur le document, tous les cercles de rotation entièrement transparents commencent à ralentir le rendu du navigateur. On dirait que les animations se déclenchent toujours.

Dans cet exemple avec display: none; nous obtenons le même résultat, le div#preview est nettement plus lent:

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>