67

我想在我的 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.

我的新方法有什么影响？它是否会在任何方面影响浏览器性能？

4

8 回答 8

84

display:none;元素不在渲染树中 all，因此它们在面值上会表现得更好。

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

于 2012-08-01T10:14:13.537 回答
56

如果您通过 javascript 在可见和不可见状态之间切换，那么可见性：隐藏应该是更好的执行者。看到它在可见和隐藏状态下总是占用相同数量的空间，因此每次使它看起来消失时都不会导致其下方元素的回流。对于 display:none ，您将其从文档流中删除，然后当您将其设置为 display:block 时，您将重新渲染它并将该元素下方的所有内容向下推，基本上将所有这些内容再次放置。

但是，如果您正在执行诸如切换按钮按下时的可见状态之类的操作，那么您确实应该使用适合您需求的东西，而不是性能更好的东西，因为在这种情况下性能差异可以忽略不计。当您以每秒大约 20 次的速度使用 dom 进行动画处理时，您可以担心可见性的性能：隐藏与显示：无。

于 2012-09-28T13:54:04.533 回答
49

visibility: hidden不会导致文档重新流动，而display: none会。

display: none：HTML 引擎将完全忽略元素及其子元素。引擎不会忽略标有visibility: hidden的元素，它会对元素及其子元素进行所有计算，但不会将元素渲染到视口。

如果需要位置和尺寸属性的值，则visibility: hidden必须使用，并且您必须处理视口中的空白区域，通常通过将该元素包装在另一个具有 0 宽度和高度以及“溢出：隐藏”的元素中。

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

display: none是在视口上隐藏元素时使用的自然且合乎逻辑的解决方案，visibility: hidden应在需要的地方/时间用作后备。

编辑：正如@Juan 所指出的，display: none当您需要向 DOM 树中添加许多元素时，这是一种选择。visibility: hidden将为添加到树的每个元素触发重新流动，而display: none不会。

于 2012-08-01T10:15:33.620 回答
13

我不知道和之间有任何性能差异display:none——visibility:hidden即使有，对于少至 10 个元素，它也完全可以忽略不计。正如您所说，您的主要关注点应该是是否希望元素保留在文档流中，在这种情况下visibility是更好的选择，因为它维护了元素的框模型。

于 2012-08-01T10:12:47.973 回答
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/

于 2018-04-15T11:55:10.873 回答
2

根据个人经验，刚刚在一个简单的静态页面上尝试了一个位于“隐藏”按钮下方的表单，visibility: hidden它完美地执行，而display: none导致可点击按钮在点击时略微跳跃，好像它试图显示隐藏按钮一毫秒。

于 2017-01-28T23:16:00.700 回答
0

好吧，visibility:none 仍然使用 div 的空间。因此，您可能会跳过定位部分，因为它的位置已经分配（并由此获得更好的性能）。

但是我以某种方式猜测您需要 display:none 方法来在触发“显示”事件时正确分配空间。

于 2012-08-01T10:14:36.937 回答
0

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

我只引用有趣的部分：

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

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

于 2012-08-01T10:22:25.470 回答