javascript - gases - visibilidad: oculta frente a pantalla: ninguna frente a opacidad: 0

analizador de gases bosch

Question

Actualmente estoy comenzando un proyecto de animación. En el proyecto tendré más de 40000 div s y los animaré iterativamente. Si alguno de los div está en estado pasivo (es decir, no está animando al menos durante 2 segundos), no los mostraré para aumentar el rendimiento de la animación.

La pregunta es: ¿qué propiedad CSS es la más adecuada para esto?

.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}

¿Y cómo puedo medir el rendimiento de procesamiento como fps, uso de gpu?

Answer 1

En algún momento utilizo la visibilidad y la opacidad para lograr el efecto para evitar el evento click

p.ej

estado / elemento normal eliminado de la pantalla:

visibility:hidden;
opacity:0;
transition: all .3s;

hover state / element en la pantalla:

visibility:visible;
opacity:1;

Answer 2

La respuesta que se encuentra here responderá a su primera pregunta (lo más probable es que se display:none ya que el espacio está completamente colapsado).

Para su segunda pregunta, herramientas como this probablemente serán útiles para usted. Sin embargo, 40,000 divs suenan como demasiados y probablemente tengas un mejor rendimiento usando canvas o SVG (por ejemplo, usando la biblioteca KineticJS ya que maneja las animaciones - transformación, rotación, escala, etc.) para ti.

Answer 3

Pantalla: ninguna ocultará todo el elemento y lo eliminará del espacio de diseño, mientras que visibilidad: oculto oculta un elemento pero ocupará el mismo espacio que antes.
La opacidad se puede usar si desea crear transparencia o efecto de fundido.

Answer 4

Perfomamce será un problema si display: none o visibility: hidden se usa ya que activa la pintura y el diseño en la mayoría de los navegadores, lo que significa que su navegador redibujará la ventana cada vez que cambien, así que recomendaré la opacidad pero para esa cantidad de divs lo hará todavía no está funcionando como se espera, puede probar webgl usando una biblioteca llamada html-gl que represente sus divs en webgl check https://github.com/PixelsCommander/HTML-GL

Answer 5

Todos ellos hacen que el elemento sea invisible, pero difieren en cuanto a si ocupa espacio y consume clics

+--------------------+----------------+-----------------+
| Property | occupies space | consumes clicks |
+--------------------+----------------+-----------------+
| opacity: 0 | ✓ | ✓ |
+--------------------+----------------+-----------------+
| visibility: hidden | ✓ | ✗ |
+--------------------+----------------+-----------------+
| display: none | ✗ | ✗ |
+--------------------+----------------+-----------------+
✓: yes
✗: no

Y cuando decimos que consume clic, eso significa que también consume otros eventos de puntero como ondblclick, onmousedown, onmousemove, etc.

En esencia, "visibility: none" se comporta como una combinación de "opacity: 0" y "pointer-events: none".

Answer 6

display:none : no ocupa espacio, no tiene elementos aquí.

opacity:0 : ocupa espacio, puede hacer clic en el elemento detrás de él.

visibility:hidden : ocupa espacio y no puede hacer clic en el elemento detrás de él.

Answer 7

display:none porque los divs son sacados del flujo entonces, por lo tanto su posición no tiene que ser calculada.

Dicho esto, 40000 divs suena loco. ¿Consideró las alternativas como canvas HTML5 o SVG?