Différences de performances entre la visibilité: masquée et l'affichage: aucune
Je veux simplifier les choses dans mon application Web jQuery Backbone.js. Une telle simplification est le comportement de mes widgets de menu et de dialogue.
Auparavant, je créais les boîtes div de mes menus au démarrage et les masquais à l'aide de display: none; opacity:0;. Lorsque j'avais besoin d'un menu, j'ai changé son style en display:block a ensuite utilisé l'utilitaire jQuery ui position pour positionner la boîte div (puisque les éléments avec display:none ne peut pas être positionné) et quand cela a été fait, a finalement changé son style en opacity:1.
Maintenant, je veux juste les cacher avec visibility:hidden, et lorsque j'en ai besoin, j'utilise l'utilitaire de positionnement, puis je change le style en visibility:visible. Lorsque je commencerai à utiliser cette nouvelle approche, j'aurai environ 10 boîtes div au cours de la session d'application Web qui sont masquées mais occupent de l'espace, contrairement aux boîtes div précédentes masquées avec display:none.
Quelles sont les implications de ma nouvelle approche? Cela affecte-t-il les performances du navigateur à quelque égard que ce soit?
Je ne suis au courant d'aucune différence de performances entre display:none et visibility:hidden - même s'il y en a, pour aussi peu que 10 éléments ce sera complètement négligeable. Votre principale préoccupation doit être, comme vous le dites, si vous souhaitez que les éléments restent dans le flux de documents, auquel cas visibility est une meilleure option car il maintient le modèle de boîte de l'élément.
display:none; les éléments sont pas dans tous les arbres de rend , donc ils fonctionneront mieux à leur valeur nominale.
Je doute que vous ayez cependant de réels problèmes de performances visibles. Si tu as besoin opacity: 0 ou visibility: hidden en raison de leurs fonctionnalités , alors utilisez-les. Si vous n'avez pas besoin de la fonctionnalité, utilisez display: none;
Si vous basculez entre les états visibles et invisibles via javascript, alors visibilité: hidden devrait être le plus performant. Étant donné qu'il occupe toujours la même quantité d'espace dans les états visibles et cachés, il ne provoquera pas de refusion des éléments en dessous de lui chaque fois que vous le faites apparaître ou disparaître. Pour l'affichage: aucun, vous le supprimez du flux du document, puis lorsque vous le définissez pour afficher: bloquer, vous le restituez et appuyez sur tout ce qui se trouve en dessous de cet élément, en déposant essentiellement toutes ces choses à nouveau.
Mais si vous faites quelque chose comme basculer les états visibles sur les touches, vous devez vraiment utiliser ce qui convient à vos besoins plutôt que ce qui fonctionne mieux, car les différences de performances sont négligeables dans de tels cas. Lorsque vous animez avec le dom à environ 20 fois par seconde ALORS, vous pouvez vous soucier des performances de visibilité: caché vs affichage: aucun.
visibility: hidden ne provoque pas de redistribution sur le document, tandis que display: none Est-ce que.
display: none oblige le moteur HTML à complètement ignorer l'élément et ses enfants. Le moteur n'ignore pas les éléments marqués de visibility: hidden, il fera tous les calculs de l'élément et de ses enfants, l'exception est que l'élément ne sera pas rendu dans la fenêtre.
Si les valeurs des propriétés de position et de dimensions sont nécessaires, alors visibility: hidden doit être utilisé et vous devez gérer l'espace blanc dans la fenêtre, généralement en enveloppant cet élément à l'intérieur d'un autre avec 0 largeur et hauteur et 'débordement: caché'.
display:none supprimera l'élément du document flux normal et définira les valeurs de position/hauteur/largeur sur 0 sur l'élément et ses enfants. Lorsque la propriété des éléments display est remplacée par une valeur autre que none, elle déclenche une redistribution complète du document, ce qui peut être un problème pour les gros documents - et parfois des documents moins importants étant rendu sur le matériel avec des capacités limitées.
display: none est la solution naturelle et logique à utiliser pour masquer des éléments dans la fenêtre, visibiliy: hidden doit être utilisé comme solution de rechange, où/quand cela est nécessaire.
EDIT: Comme l'a souligné @Juan, display: none est le choix à faire lorsque vous avez besoin d'ajouter de nombreux éléments à l'arborescence DOM. visibility: hidden déclenchera une redistribution pour chaque élément ajouté à l'arborescence, tandis que display: none ne le sera pas.
Eh bien, la principale différence de performances entre display: block Et visibility: hidden Est que si vous avez une liste de, disons, 100 000 éléments, le visibility: hidden Ne vous évitera pas de suspendre DOM parce que il ne supprime pas les éléments du DOM. visibility: hidden Se comporte comme opacity: 0 + pointer-events: none. display: none Agit comme Element.remove().
Exemple en direct: https://jsfiddle.net/u2dou58r/10/
Par expérience personnelle après avoir essayé les deux sur une simple page statique avec un formulaire situé sous un bouton "caché", visibility: hidden fonctionne parfaitement alors que display: none fait sauter légèrement les boutons cliquables en cliquant, comme s'il essayait d'afficher le bouton caché pendant une milliseconde.
Eh bien, la visibilité: aucun n'utilise encore l'espace du div. Vous pouvez donc peut-être ignorer la partie de positionnement car sa place est déjà allouée (et par là obtenir de meilleures performances).
Mais je suppose en quelque sorte que vous avez besoin de votre affichage: aucune approche pour allouer correctement l'espace lorsque l'événement "show" est déclenché.
Je pense que cela pourrait être en quelque sorte lié à cette question: Propriétés CSS: Affichage vs Visibilité
Je vais juste citer la partie intéressante:
l'élément n'est JAMAIS supprimé de la hiérarchie DOM. Tous les "styles" d'affichage au niveau du bloc sont complètement "masqués" lorsque vous utilisez display: none, alors qu'avec la visibilité: hidden; l'élément lui-même est caché mais il occupe toujours un espace visuel dans le DOM.
Il ne devrait donc pas y avoir de réelle différence en ce qui concerne les performances du navigateur, car les deux versions sont toujours dans la hiérarchie DOM. Ces propriétés affectent uniquement la façon dont un élément est affiché par rapport au DOM.