Les différences de rendement entre visibility:hidden et display:none

Je veux simplifier les choses dans mon jQuery Backbone.js application web. Une telle simplification est le comportement de mon menu et boîte de dialogue de widgets.

Précédemment, j'ai créé un div boîtes de mes menus à démarrer et les cacha à l'aide de display: none; opacity:0;. Quand j'ai besoin d'un menu, j'ai changé son style à display:block ensuite utilisé jQuery ui position de l'utilitaire à la position de la div box (depuis les éléments avec display:none ne peuvent pas être positionnés) et quand il a été fait, enfin changé son style de opacity:1.

Maintenant, je veux juste les cacher avec visibility:hidden, et quand j'en ai besoin, j'utilise la position de l'utilitaire, puis de changer le style de visibility:visible. Quand j'ai commencer à utiliser cette nouvelle approche, je vais avoir autour de 10 div encadrés tout au long de l'application web de session qui sont cachés, mais qui occupent de l'espace, contrairement à la précédente div boîtes cachées avec display:none.

Quelles sont les conséquences de ma nouvelle approche? Prend-il en effet les performances du navigateur en tout ce qui concerne?

InformationsquelleAutor Wolfgang Adamec | 2012-08-01

11

Je ne suis pas au courant de toute différence de performances entre display:none et visibility:hidden - même si il est, pour aussi peu que 10 éléments, il sera tout à fait négligeable. Votre principale préoccupation devrait être, comme vous le dites, si vous voulez que les éléments restent dans le flux de documents, dans ce cas visibility est une meilleure option, car elle maintient le modèle de boîte de l'élément.

InformationsquelleAutor chrisf
69

display:none; éléments sont pas dans le rendu de l'arborescence de tous les, de sorte qu'ils ont un meilleur rendement à la valeur nominale.

Je doute que vous aurez un réel visible les problèmes de performances de cette même si. Si vous avez besoin d' opacity: 0 ou visibility: hidden en raison de leur fonctionnalité, puis il suffit de les utiliser. Si vous n'avez pas besoin de la fonctionnalité, puis utilisez display: none;
- +1 - très intéressant!!! Savez-vous que les navigateurs ont ce rendu arbre de l'optimisation?
- Je veux dire tous, mais vous ne pouvez jamais savoir sur IE 😀
- Même IE ignore l'élément s'il a "display: none".
- Bien qu'il puisse mieux remplir la première fois, si vous êtes basculement display rapide, vous êtes d'avoir des ennuis. Découvrez les autres réponses.
- dans le cas où vous avez des centaines d'éléments, comme une mosaïque de carte ou de jeu, j'ai toujours supprimer l'affichage des attributs dans le sens inverse-dom afin de prévenir les remboursements sur le conteneur!
- Pour une de mes pages 3D avec des effets CSS et plusieurs milliers d'éléments dans le DOM, basculer "affichage" sur un grand récipient élément a provoqué un décalage de près de 500ms plus lent des appareils mobiles. Changer le CSS à la place de la bascule "visibilité" éliminé le gal entièrement.
InformationsquelleAutor Esailija
52

Si vous êtes le basculement entre visible et invisible membres par l'intermédiaire de javascript puis visibility:hidden doit être le meilleur interprète. Voyant qu'il prend toujours la même quantité d'espace à la fois visible et caché les états de ne pas provoquer un reflux des éléments ci-dessous à chaque fois que vous le faire apparaître, de disparaître. Pour display:none vous retirer de la circulation du document, puis lorsque vous le réglez display:block vous êtes nouveau rendu et en appuyant tout en dessous de l'élément vers le bas, essentiellement la pose de tout ça de nouveau.

Mais si vous faites quelque chose, par exemple le basculement d'états visibles sur appuie sur un bouton alors vous devez vraiment être à l'aide de ce qui convient à vos besoins plutôt que de ce qui fonctionne mieux, que les différences de performances sont négligeables dans de tels cas. Lorsque vous êtes animation avec les dom, à près de 20 fois par seconde, ALORS vous pouvez vous soucier de la performance de visibility:hidden vs display:none.
- J'avais upvote ce si vous avez fourni des sources. Je sais que display:none provoque une redistribution alors que visibility:hidden ne fonctionne pas ... donc, intuitivement, je pense que vous êtes morts à la. Mais de bonnes réponses sur DONC, le lien à la documentation officielle ou des explications plus poussées, je n'ai pas assez de fond sur ce sujet à +1 ce, sans sources.
- cet article de Nicole Sullivan parle. Elle est généralement considérée comme une CSS d'experts et a aidé à construire CSSLint. Ne sais pas si cela est admissible à titre de bonne source mais j'ai bien confiance à son avis, stubbornella.org/content/2009/03/27/...
InformationsquelleAutor andwhyisit
41

visibility: hidden ne cause pas de ré-écoulement sur le document, tout en display: none n'.

display: none rend le moteur HTML de complètement ignorer l'élément et de ses enfants. Le moteur ne pourra pas ignorer les éléments marqués avec visibility: hidden, il va faire tous les calculs à l'élément et de ses enfants, l'exception est que l'élément ne sera pas affiché sur l'écran.

Si les valeurs de position et les dimensions des propriétés sont nécessaires alors visibility: hidden ont à être utilisé, et vous avez à gérer l'espace blanc dans la fenêtre d'affichage, généralement en les enveloppant que l'élément à l'intérieur d'une autre avec 0 de largeur et de hauteur et de "overflow: hidden'.

display:none va supprimer l'élément à partir du document flux normal et de définir les valeurs pour la position/hauteur/largeur à 0 sur l'élément et de ses enfants. Lorsque les éléments display propriété est modifiée à d'autres de valeur que none, il déclenche un document complet de ré-écoulement, ce qui peut être un problème pour de gros documents - et parfois pas si gros documents en cours de rendu sur le matériel avec des capacités limitées.

display: none est la solution logique et naturelle à utiliser lors de cacher des éléments sur la fenêtre d'affichage, visibiliy: hidden devrait être utilisé comme une solution de repli, où/en cas de besoin.

EDIT:
Comme indiqué par @Juan, display: none est le choix d'aller quand ce que vous avez besoin est d'ajouter de nombreux éléments de l'arborescence DOM. visibility: hidden sera le déclencheur d'une ré-écoulement pour chaque élément ajouté à l'arbre, tandis que display: none ne sera pas.
- Ce est le vrai problème avec display:none vs visibility:hidden. Si vous ajoutez beaucoup d'éléments pour un DOM, et vous les ajoutez caché, alors vous allez provoquer un reflux de chacun. D'autre part, vous pouvez ajouter autant d'éléments que vous le souhaitez avec display:none et de leur montrer tout à la fois provoquant un seul de redistribution. La performance de la taxation de l'action est la refusion.
- Bon point. Votre commentaire doit être aussi une partie de la réponse.
InformationsquelleAutor Marcelo De Zen
4

Bien, la principale différence de performances entre display: block et visibility: hidden est que si vous avez une liste de, disons, 100000 éléments, la visibility: hidden ne vous sauvera pas de DOM retrait, car il permet de ne pas supprimer des éléments du DOM.
visibility: hidden agit comme opacity: 0 + pointer-events: none. display: none agit comme Element.remove().

Live exemple: https://jsfiddle.net/u2dou58r/10/

InformationsquelleAutor Limbo
2

Par expérience personnelle, juste après avoir essayé les deux sur une simple page statique avec un formulaire situé sous une "caché" bouton, visibility: hidden fonctionne parfaitement alors que display: none provoque des boutons cliquables à légèrement sauter en cliquant, comme si il essaie de montrer le bouton caché pour un millième de seconde.

InformationsquelleAutor Soupedenuit
0

Bien, visibilité:aucun utilise encore l'espace de la div.
Donc, vous pourriez peut-être sauter le positionnement de la partie parce que sa place est déjà alloué (et que d'obtenir un meilleur rendement).

Mais j'ai quelque suppose que vous avez besoin de votre display:none approche pour allouer de l'espace correctement lorsque le "show" de l'événement est déclenché.

InformationsquelleAutor Najzero
0

Je pense que cela pourrait être en quelque sorte lié à cette question: Propriétés CSS: Afficher vs Visibilité

Je vais juste citer la partie intéressante:

l'élément n'est pas supprimé de la hiérarchie DOM. Tout bloquer l'affichage du niveau de "styles" sont complètement "caché" lors de l'utilisation de display:none, alors qu'avec visibility:hidden; l'élément lui-même est caché, mais il occupe toujours un espace visuel dans les DOM.

Il n'y a pas de réelle différence en ce qui concerne les performances du navigateur, parce que les deux versions sont toujours dans la hiérarchie DOM. Ces propriétés affectent uniquement comment un élément est affiché en ce qui concerne les DOM.
- Juste parce qu'un élément dans le DOM de la hiérarchie ne veut rien dire en termes de performances. Cela dépend de combien il est coûteux de rendre cet élément et de ses enfants sur l'écran, qui peut varier de façon arbitraire.
InformationsquelleAutor Martin M.

Vous devez vous connecter pour publier un commentaire.