隐藏/遮挡的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动画是否仍然会导致浏览器重绘或性能问题？

回答

相关问题