visibility：hidden vs display：none vs opacity：0 [英] visibility:hidden vs display:none vs opacity:0

问题描述

我目前正在开始一个动画项目。在项目中，我将有超过40000 div ，并迭代地动画。如果 div 中的任何一个处于被动状态（即它不是至少动画2秒），我不会显示它们来提高动画性能。

I'm currently starting on an animation project. In the project I'll have more than 40000 divs and animate them iteratively. If any of divs are in passive state (i.e. it's not animating at least for 2 seconds), I won't display them to increase animation performance.

问题是：哪个css属性最适合这个属性？

The question is: which css property is the most suitable for this?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

如何测量渲染性能，如fps，gpu用法？

And how can I measure rendering performance like fps, gpu usage?

推荐答案

找到此处的答案将会回答您的第一个问题（很可能 display：none ，因为空间完全折叠）。

The answer found here will answer your first question (most likely display:none as the space is collapsed completely).

对于您的第二个问题，这些< a>可能对你有用。然而，40,000 divs听起来太多了，你可能会有更好的性能使用画布或SVG（例如，使用 KineticJS 库，因为它处理动画 - 变换，旋转，缩放等）。

To your second question, tools such as this will probably be useful for you. However 40,000 divs sounds like way too many and you will probably have better performance using canvas or SVG (for example, using the KineticJS library as this handles animations - transformation, rotation, scale, etc.) for you.

这篇关于visibility：hidden vs display：none vs opacity：0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！