Werden versteckte/verdeckte SVG-Animationen immer noch Browser-Repaints und/oder Performance-Probleme verursachen?

Ich überlege, eine SVG-Spinner-Animation hinter einige Bilder zu stellen, die ich lade, und dann das Bild oben auf den Spinner zu legen, so dass der Spinner beim Laden des Bildes verdeckt wird. Planen, dies auf eine Listenansicht mit potenziell hunderten von Elementen anzuwenden.Werden versteckte/verdeckte SVG-Animationen immer noch Browser-Repaints und/oder Performance-Probleme verursachen?

Die erste Frage ist, wird der verdeckte SVG Spinner (sobald das entsprechende Bild lädt) weiterhin den Browser neu streichen? (das klingt teuer)

Wenn ja, wäre die nächste Frage, wenn ich verstecken (display: none) den Spinner, wenn das Bild lädt, wird das versteckte Spinner weiterhin neu streichen?

Alle anderen Leistungsgedanken sind sehr willkommen.

FWIW, dies ist eine Electron-App, also ist Chromium (eine relativ aktuelle Version) der einzige Browser, mit dem wir es zu tun haben.

Quelle

2017-09-20 robmisio

Sie haben. – Kaiido

Repaint, nein. neu berechnen ja. Die Animation muss ausgeführt werden, da sie andere beobachtbare Effekte als die auf der Seite angezeigten aufweist, d. H. Die Werte, die Sie ändern können. –

Das hat mich interessiert ... mit ein example SVG ich gepeitscht zusammen, um diesen Test (Entschuldigung, wie scrummy der Code):

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>

Wie Sie sehen können, wenn Sie viel klicken auf dem Dokument beginnen alle vollständig transparenten Kreise das Browser-Rendering zu verlangsamen. Sieht so aus, als ob die Animationen immer noch ausgelöst werden.

In diesem Beispiel mit display: none; wir das gleiche Ergebnis zu erhalten, ist die div#preview deutlich langsamer: eine "Rendering> Farbe Blinken" Option in Ihren Devs Tools

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>

Quelle

2017-09-21 00:09:35 Isaac

Es gibt kein Rendering, es wird eine Berechnung durchgeführt, da Sie jederzeit einen JavaScript-Aufruf ausführen können, um nach der Position des animierten Objekts zu fragen –

Werden versteckte/verdeckte SVG-Animationen immer noch Browser-Repaints und/oder Performance-Probleme verursachen?

Antwort

Verwandte Themen