visibility:hidden vs display:none vs opacity:0

Question

Je commence actuellement un projet d'animation. Dans ce projet, je vais avoir plus de 40000 div et les animer de manière itérative. Si l'un des div sont dans un état passif (c'est-à-dire qu'il n'y a pas d'animation pendant au moins 2 secondes), je ne les afficherai pas pour augmenter les performances de l'animation.

La question est la suivante : quelle propriété css est la plus appropriée pour cela ?

.passive1{
   display:none
}

.passive2{
    visibility:hidden;
}

.passive3{
    opacity:0;
}

Et comment puis-je mesurer les performances de rendu comme les images par seconde, l'utilisation du processeur ?

Answer 1

Alors que ces 3 propriétés rendent la boîte d'un élément semblent invisible, il existe des différences cruciales entre eux :

Propriété

Painted

Dans la mise en page

Contexte d'empilement

Événements relatifs aux pointeurs

Événements clavier

opacity: 0;

Non

Oui

Nouveau

Oui

Oui

visibility: hidden;

Non

Oui

Variable

Non

Non

display: none;

Non

Non

Variable

Non

Non

• La colonne "Peint" indique si le navigateur va peindre l'arrière-plan de l'élément (par ex. background-image ), #text le contenu, et ainsi de suite.
  • Un élément ne peut être peint sans participer à la mise en page, bien sûr.
  • C'est Non pour les 3 propriétés et valeurs, car le navigateur n'aura pas besoin de peindre le cadre de l'élément puisqu'il est invisible.
• La colonne "Dans la mise en page" indique si le navigateur calculera la mise en page et les dimensions de l'élément - ainsi que de tous ses descendants non exclus de la mise en page.
  • C'est seulement Non para display: none; comme avec opacity: 0; y visibility: hidden; le navigateur déterminera tout de même la taille de l'élément afin de pouvoir disposer correctement les autres éléments par rapport à l'élément actuel (par exemple, si vous disposez de span.hidden { visibility: hidden; display: inline; } ).
• La colonne "contexte d'empilement" indique que toute utilisation de opacity (sauf opacity: 1.0; ) créera un nouveau contexte d'empilement, ce qui complique l'utilisation de la fonction position propriété.
• La colonne "Événements de pointage" indique si l'élément répondra à l'interaction de l'utilisateur avec un dispositif de pointage, tel qu'une souris, un écran tactile, un stylet, etc.
  • par exemple avec visibility: hidden; alors le :hover ne fonctionnera pas, et le fait de cliquer sur le même élément ne permettra pas d'appliquer :focus ou :active soit.
  • De plus, le DOM ne déclenchera pas d'événements liés aux pointeurs que vous manipuleriez en JavaScript (par ex. visibility: hidden; n'augmentera pas mouseclick , touchstart etc. - notez que le click peut toujours être déclenché par certains éléments, tels que <button> s'il est invoqué par l'utilisateur à l'aide d'une méthode d'entrée sans pointeur, par exemple avec des moyens de navigation par clavier ou par la voix (accessible).
    • Vous pouvez utiliser pointer-events: none; pour bloquer les événements liés aux pointeurs, mais cela ne bloquera pas le clavier et les autres entrées non pointées. et ne doit donc pas être utilisé pour désactiver un élément car l'utilisateur peut toujours utiliser le clavier pour interagir avec lui (en particulier <button> , <input /> , <select> y <textarea> ).
• La colonne "Événements clavier" indique si l'élément peut être manipulé à l'aide du clavier (et éventuellement d'autres moyens de navigation).
  • Il s'agit notamment des boutons "Champ précédent/suivant" des navigateurs des appareils intelligents (smartphones et tablettes) permettant de naviguer <form> (car cela utilise tabindex ).
  • Contrairement à la façon dont les événements de pointeur peuvent être désactivés en CSS à l'aide de l'option pointer-events: none; il n'existe pas de propriété CSS permettant de désactiver l'interaction avec le clavier.

---

Ce tableau montre une comparaison plus complète entre les principales valeurs de ces 3 propriétés :

Propriété

Painted

Dans la mise en page

Contexte d'empilement

Événements relatifs aux pointeurs

Événements clavier

Animable

Opacité

opacity: 0;

Non

Oui

Nouveau

Oui

Oui

Oui

opacity: 0.1;

Oui

Oui

Nouveau

Oui

Oui

Oui

opacity: 0.9;

Oui

Oui

Nouveau

Oui

Oui

Oui

opacity: 1;

Oui

Oui

Variable

Oui

Oui

Oui

Visibilité

visibility: hidden;

Non

Oui

Variable

Non

Non

Oui, avec des réserves

visibility: visible;

Oui

Oui

Variable

Oui

Oui

Oui, avec des réserves

Afficher

display: none;

Non

Non

Variable

Non

Non

Non

display: contents;

Texte et enfants uniquement

Texte et enfants uniquement

Variable

Oui

Oui

Non

Autre

pointer-events: none;

N/A

N/A

N/A

Non

Oui

Non

• La colonne "Animatable" indique si cette propriété peut être utilisée avec une transition CSS ( transition: ) ou l'animation CSS ( @keyframes ).

  • De manière cruciale, le display: propriété ne peuvent pas être animés c'est pourquoi nous ne pouvons pas utiliser un fichier @keyframes pour masquer complètement un élément une fois l'animation terminée.
    • Mais curieusement, nous peut animer le visibility: malgré son caractère non continu, mais avec des réserves .

• De plus, ne vous laissez pas déconcerter par le nom similaire de backface-visibility y content-visibility propriétés.

  • backface-visibility est uniquement applicable à la 3D transform opérations.
  • content-visibility est une optimisation pour accélérer le rendu des pages au cours du chargement initial de la page, mais elle nécessite d'abord un confinement CSS, ce qui est hors du champ d'application de ce QA.

Answer 2

La réponse a trouvé aquí répondra à votre première question (très probablement display:none car l'espace est complètement effondré).

Pour répondre à votre deuxième question, des outils tels que ce vous sera probablement utile. Toutefois, 40 000 divs semblent beaucoup trop nombreux et vous obtiendrez probablement de meilleures performances en utilisant le canevas ou le SVG (par exemple, en utilisant la fonction KineticJS car elle gère les animations (transformation, rotation, échelle, etc.) pour vous.

Answer 3

Les performances seront un problème si display:none ou visibility:hidden est utilisé car ils déclenchent la peinture et la mise en page dans la plupart des navigateurs, ce qui signifie que votre navigateur redessinera la fenêtre d'affichage à chaque fois que ces deux changements seront effectués. Je recommanderai donc l'opacité mais pour ce nombre de divs, les performances ne seront toujours pas au rendez-vous. Vous pouvez essayer webgl en utilisant une bibliothèque appelée html-gl qui rendra vos divs en webgl. https://github.com/PixelsCommander/HTML-GL

Answer 4

display:none masquera l'élément entier et le supprimera de l'espace de présentation alors que visibility:hidden cache un élément mais occupe le même espace qu'avant.
L'opacité peut être utilisée si vous souhaitez créer un effet de transparence ou de fondu.

Answer 5

Voici une compilation d'informations vérifiées provenant des différentes réponses.

Chacune de ces propriétés CSS est en fait unique. En plus de rendre un élément non visible, elles ont le ou les effets supplémentaires suivants :

1. Effondrements l'espace que l'élément occuperait normalement
2. Répond à événements (par exemple, clic, pression sur une touche)

3. Participe à la Taborder

                    collapse events taborder

   opacity: 0 No Yes Yes visibility: hidden No No No visibility: collapse * No No display: none Yes No No

   * Yes inside a table element, otherwise No.

obtenu de lien