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

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框，这些框隐藏但占用空间，与之前隐藏display:none的div框形成对比。

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

Answer 1

display:none;元素为not in the render tree all，因此它们的面值会更好。

我怀疑你会遇到任何真正可见的性能问题。如果您需要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将从文档的正常流中删除元素，并在元素及其子元素上将position / height / width的值设置为0。当元素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/

Answer 6

根据个人经验，我们在一个简单的静态页面上尝试了两种形式，其中一个表格位于＆＃34;隐藏＆＃34;按钮，visibility: hidden执行完美，而display: none导致可点击按钮在点击时略微跳跃，就好像它试图显示隐藏按钮一毫秒。

Answer 7

嗯，可见性：没有人仍然使用div的空间。 因此，您可以跳过定位部分，因为它的位置已经分配（并且通过它可以获得更好的性能）。

但我猜不出你需要你的显示：无法在触发“show”事件时正确分配空间。

Answer 8

我认为这可能与某个问题有关：CSS Properties: Display vs. Visibility

我将引用有趣的部分：

  

该元素永远不会从DOM层次结构中删除。使用display：none时，所有块级别显示“样式”都完全“隐藏”，而可见性：隐藏;元素本身是隐藏的，但它仍占据DOM中的可视空间。

因此，浏览器性能应该没有真正的区别，因为两个版本仍然在DOM层次结构中。这些属性仅影响关于DOM显示元素的方式。