可见性:隐藏和显示之间的性能差异:无

Question

我想在我的jQuery Backbone.js Web应用程序中简化一些事情.一个这样的简化是我的菜单和对话框小部件的行为.

以前我在开始时创建了菜单的div框并隐藏了它们display: none; opacity:0;.当我需要一个菜单​​时,我改变了它的样式display:block然后使用jQuery ui位置实用程序来定位div框(因为display:none无法定位的元素)以及何时完成,最后将其样式更改为opacity:1.

现在我想隐藏它们visibility:hidden,当我需要它时,我使用位置实用程序,然后将样式更改为visibility:visible.当我开始使用这种新方法时,我将在整个Web应用程序会话中有大约10个div框,这些框隐藏但占用空间,与之前隐藏的div框形成对比display:none.

我的新方法有什么含义？它在任何方面都会影响浏览器性能吗？

Answer 1

display:none;元素不在渲染树中,因此它们在面值方面表现更好.

我怀疑你会遇到任何真正可见的性能问题.如果您需要opacity: 0或visibility: hidden 因为它们的功能,那么就使用它们.如果您不需要该功能,请使用display: none;

Answer 2

如果您通过javascript在可见和不可见状态之间切换,那么visibility:hidden应该是更好的执行者.看起来它总是在可见和隐藏状态下占用相同的空间量,每次使它看起来消失时,它不会导致它下面的元素重排.对于显示:没有你从文档流中删除它然后当你设置它显示:阻止你重新渲染它并推下该元素下面的所有东西,基本上把所有东西再次放下.

但是如果你正在按下按钮按下切换可见状态,那么你真的应该使用适合你需要的东西而不是更好的东西,因为在这种情况下性能差异可以忽略不计.当您使用dom以每秒20次动画制作动画时,您可以担心可见性的性能:隐藏与显示:无.

Answer 3

visibility: hidden同时不会导致文档重新流动display: none.

display: none使HTML引擎完全忽略元素及其子元素.引擎不会忽略标记的元素visibility: hidden,它会对元素及其子元素进行所有计算,例外的是元素不会在视口上呈现.

如果需要visibility: hidden使用位置和尺寸属性的值,则必须使用并且必须处理视口中的空白区域,通常是将该元素包含在另一个宽度和高度为0且"溢出:隐藏"的元素中.

display:none将从文档的正常流中删除元素,并将元素及其子元素上的位置/高度/宽度值设置为0.当elements display属性更改为其他值时none,它会触发一个完整的文档重新流,这对于大文档来说可能是一个问题 - 有时候在具有有限功能的硬件上呈现的文件并不大.

display: none是隐藏视口上的元素时使用的自然和逻辑解决方案,visibiliy: hidden应该在需要时/作为后备使用.

编辑:正如@Juan指出的那样,display: none当你需要的是向DOM树中添加许多元素时,可以选择.visibility: hidden将触发添加到树中的每个元素的重新流动,而display: none不会.

Answer 4

我不知道之间的性能差异display:none和visibility:hidden-即使有,只要花10元就完全可以忽略不计.正如您所说,您的主要关注点应该是您是否希望元素保留在文档流中,在这种情况下,这visibility是一个更好的选择,因为它维护元素的盒子模型.

Answer 5

好吧，display: block和之间的主要性能差异visibility: hidden是，如果您有一个包含 100000 个元素的列表，visibility: hidden则不会使您免于 DOM 挂起，因为它不会从 DOM 中删除元素。 visibility: hidden就像opacity: 0+一样pointer-events: none。display: none就像Element.remove().

实例：https : //jsfiddle.net/u2dou58r/10/