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

Performance differences between visibility:hidden and display:none

提问by Wolfgang Adamec

I want to simplify things in my jQuery Backbone.js web application. One such simplification is the behavior of my menu and dialog widgets.

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

Previously I created the div boxes of my menus at start and hid them using display: none; opacity:0;. When I needed a menu, I changed its style to display:blockthen used the jQuery ui position utility to position the div box (since elements with display:nonecannot be positioned) and when it was done, finally changed its style to opacity:1.

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

Now I want to just hide them with visibility:hidden, and when I need one, I use the position utility and then change the style to visibility:visible. When I begin using this new approach, I will have around 10 div boxes throughout the web application session that are hidden but occupy space, in contrast to the previous div boxes hidden with display:none.

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

What are the implications of my new approach? Does it effect browser performance in any regard?

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

采纳答案by chrisf

I'm not aware of any performance difference between display:noneand visibility:hidden- even if there is, for as little as 10 elements it will be completely negligible. Your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case visibilityis a better option as it maintains the box model of the element.

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

回答by Esailija

display:none;elements are not in the render tree all, so they will perform better at face value.

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

I doubt you will have any real visible performance problems from this though. If you need opacity: 0or visibility: hiddenbecause of their functionality, then just use them. If you don't need the functionality, then use display: none;

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

回答by andwhyisit

If you are toggling between visible and invisible states via javascript then visibility:hidden should be the better performer. Seeing as it always takes up the same amount of space in both visible and hidden states it won't cause a reflow of the elements below it every time you make it appear of disappear. For display:none you are removing it from the flow of the document and then when you set it to display:block you are rerendering it and pushing everything below that element down, essentially laying all that stuff out again.

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

But if you are doing something like toggling visible states on button presses then you really should be using what suits your needs rather than what performs better, as the performance differences are negligible in such cases. When you are animating with the dom at around 20 times per second THEN you can worry about the performance of visibility:hidden vs display:none.

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

回答by Marcelo De Zen

visibility: hiddendoes not cause a re-flow on the document, while display: nonedoes.

visibility: hidden不会导致文档重排，而display: none会。

display: none: The HTML engine will completelyignore the element and its children. The engine will not ignore elements marked with visibility: hidden, it will do all the calculations to the element and its children, the exception is that the element will not be rendered to the viewport.

display: none：HTML 引擎将完全忽略该元素及其子元素。引擎不会忽略标有 的元素visibility: hidden，它将对元素及其子元素进行所有计算，唯一的例外是该元素不会呈现到视口。

If the values for position and dimensions properties are needed then visibility: hiddenhave to be used and you have to handle the white space in the viewport, usually by wrapping that element inside another one with 0 width and height and 'overflow: hidden'.

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

display:nonewill remove the element from the document's normal flowand set the values for position/height/width to 0 on the element and its children. When the elements displayproperty is changed to other value than none, it triggers a complete document re-flow, which can be a problem for big documents - and sometimes not-so-big documents being rendered on hardware with limited capabilities.

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

display: noneis the natural and logical solution to use when hiding elements on the viewport, visibility: hiddenshould be used as a fallback, where/when needed.

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

EDIT: As pointed by @Juan, display: noneis the choice to go when what you need is to add many elements to the DOM tree. visibility: hiddenwill trigger a re-flow for each element added to the tree, while display: nonewill not.

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

回答by Limbo

Well, the main performance difference between display: blockand visibility: hiddenis that if you have a list of, say, 100000 elements, the visibility: hiddenwon't save you from DOM hanging because it doesn't remove elements from DOM. visibility: hiddenacts like opacity: 0+ pointer-events: none. display: noneacts like Element.remove().

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

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

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

回答by Soupedenuit

From personal experience having just tried both on a simple static page with a form located beneath a "hidden" button, visibility: hiddenperforms flawlessly whereas display: nonecauses clickable buttons to slightly jump upon clicking, as if it tries to show the hidden button for a millisecond.

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

回答by Martin M.

I think this could be somehow related to this question: CSS Properties: Display vs. Visibility

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

I'll just quote the interesting part:

我只引用有趣的部分：

the element is NEVER removed from the DOM hierarchy. All block level display 'styles' are completely 'hidden' when using display:none, whereas with visibility:hidden; the element itself is hidden but it still occupies a visual space in the DOM.

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

So there should be no real difference in regard to browser performance, because both versions are still in the DOM hierarchy. These properties only affect howan element is displayed in regards to the DOM.

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

回答by Najzero

Well, visibility:none still uses the space of the div. So you could maybe skip the positioning part because its place is already allocated (and by that get a better performance).

好吧，可见性：无仍然使用 div 的空间。所以你可以跳过定位部分，因为它的位置已经分配（这样可以获得更好的性能）。

But I somehow guess that you need your display:none approach to allocate space correctly when the "show" event is triggered.

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