隱藏/遮擋的SVG動畫是否仍然會導致瀏覽器重繪或性能問題？

我正在考慮在我加載的一些圖像背後放置一個SVG微調器動畫，然後將圖像堆疊在微調器上，以便在加載圖像時隱藏微調器。計劃將此應用於具有潛在數百個項目的列表視圖。隱藏/遮擋的SVG動畫是否仍然會導致瀏覽器重繪或性能問題？

第一個問題是，被隱藏的SVG微調器（一旦其各自的圖像加載）會繼續導致瀏覽器重繪？（聽起來很貴）

如果是，下一個問題是，如果我隱藏（display: none）圖像加載時的微調，隱藏的微調將繼續導致重新繪製？

任何其他表現想法都非常受歡迎。

FWIW，這是一個Electron應用程序，所以Chromium（一個相對最新版本）是我們唯一關心的瀏覽器。

來源

2017-09-20 robmisio

你已經有了一個「渲染>油漆閃爍」選項，在你的開發者工具。 – Kaiido

repaint，no。重新計算是的。動畫必須運行，因爲它具有可觀察的效果，而不是您可以在頁面上看到的效果，即可以查詢的值發生變化。 –

這讓我感興趣......使用example SVG我一起攪打這個測試（藉口代碼是如何scrummy是）：

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>

來源

2017-09-21 00:09:35 Isaac

沒有渲染，有計算正在進行，因爲在任何時候你都可以打一個javascript調用來詢問動畫對象的位置 –

隱藏/遮擋的SVG動畫是否仍然會導致瀏覽器重繪或性能問題？

回答

相關問題