可见性:隐藏与显示:无与不透明度: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?

推荐答案

The answer found here 将回答你的第一个问题(很可能 display:none 因为空间完全折叠了).

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

对于你的第二个问题，诸如this 可能对您有用. 然而，40,000 个 div 听起来太多了，使用 canvas 或 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.

这篇关于可见性:隐藏与显示:无与不透明度:0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！