web-dev-qa-db-fra.com

visibilité: caché vs affichage: néant vs opacité: 0

Je commence actuellement un projet d'animation. Dans le projet, je vais avoir plus de 40000 divs et les animer de manière itérative. Si l'un des divs est en état passif (c'est-à-dire qu'il n'anime pas au moins 2 secondes), je ne les afficherai pas pour améliorer les performances de l'animation.

La question qui se pose est la suivante: quelle propriété css convient le mieux?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

Et comment puis-je mesurer les performances de rendu comme l'utilisation de fps ou de gpu?

javascriptcssperformanceanimationrender
33
Cihad Turhan

La réponse trouvée ici répondra à votre première question (probablement display:none car l’espace est complètement réduit).

Pour votre deuxième question, des outils tels que this vous seront probablement utiles. Cependant, 40 000 divs semblent beaucoup trop nombreux et vous obtiendrez probablement de meilleures performances en utilisant canvas ou SVG (par exemple, en utilisant la bibliothèque KineticJS car elle gère les animations - transformation, rotation, échelle, etc.).

10
DFM

Ils rendent tous l'élément invisible, mais diffèrent par le fait qu'il occupe de l'espace ou consomme des clics.

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

✓: yes
✗: no

Et quand nous disons qu'il consomme du clic, cela signifie qu'il consomme également d'autres événements de pointeur comme ondblclick, onmousedown, onmousemove, etc.

En substance, "visibilité: masqué" se comporte comme une combinaison de "opacité: 0" et de "événement de pointeur: aucun".

104
Nishant

display:none car les divs sont retirés du flux, leur position ne doit donc pas être calculée.

Cela étant dit, 40000 divs semble fou. Avez-vous envisagé des alternatives telles que HTML5 canvas ou SVG?

4
Fabian Schmengler

display:none masquera l’élément entier et le retirera de l’espace de la mise en page, alors que visibility:hidden masque un élément mais occupe le même espace qu'auparavant.
L’opacité peut être utilisée si vous souhaitez créer un effet de transparence ou de fondu. 

4
user2035789

Les performances seront un problème si display: none ou visibilité: caché est utilisé car ils déclenchent Paint et layout dans la plupart des navigateurs, ce qui signifie que votre navigateur redessinera la fenêtre d'affichage à chaque fois que ces deux modifications seront modifiées. ne soyez toujours pas performant comme prévu, vous pouvez essayer webgl en utilisant une bibliothèque appelée html-gl qui rend vos divs dans webgl check https://github.com/PixelsCommander/HTML-GL

2
Elias Bundala

Parfois, j'utilise la visibilité et l'opacité ensemble pour obtenir un effet évitant les événements liés aux clics

par exemple. 

état normal/élément supprimé de l'écran:

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

survolez l'état/élément à l'écran:

visibility:visible;
opacity:1;
0
Arlan T