Html 大量的 DOM。隐藏 vs 显示无
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4718342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Lots of DOM. Hidden vs display none
提问by Joda Maki
If I have lots of DOM on the page and I set them all to display: none, the browser still reacts quickly (scrolling is fast, page feels snappy).
如果页面上有很多 DOM 并且我将它们全部设置为显示：无，浏览器仍然反应迅速（滚动速度很快，页面感觉很活泼）。
However, if I visibility: hidden the elements, the browser is as slow as if they were all drawn on the screen.
但是，如果我visibility: hidden 元素，浏览器就像它们都被绘制在屏幕上一样慢。
Can someone explain, in detail, why this is the case?
有人可以详细解释为什么会这样吗？
回答by Felix Kling
Well in a way, they are drawn (but not really): The browser keeps space for them, so it must consider the items when laying out the visible ones.
在某种程度上，它们是绘制的（但不是真的）：浏览器为它们保留空间，因此在布置可见项时必须考虑这些项。
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
盒子是不可见的（完全透明，没有绘制任何东西），但仍然影响布局。如果元素的后代具有可见性：可见（这在版本 7 之前的 IE 中不起作用），则元素的后代将是可见的。
If you specify display: noneinstead, the browser only as to care about and layout the visible ones. It does not have to take the others into account at all.
如果您display: none改为指定，浏览器只关心和布局可见的。它根本不必考虑其他人。
Depending on your visible/invisible ratio and the number of elements, this can make a difference.
根据您的可见/不可见比率和元素数量，这可能会有所不同。
回答by Knu
Imagine a painting.
You have a white background and start drawing an apple with a lot of details during one hour and then you completely cover it with another coat of white paint.
That's visibility.
想象一幅画。
你有一个白色的背景，在一小时内开始绘制一个带有很多细节的苹果，然后你用另一层白色油漆完全覆盖它。那是visibility。
display:noneis like not drawing it from the start. Of course it's faster on first load.
display:none就像不是从一开始就画它一样。当然，第一次加载速度更快。
There are drawbacks when you are using display:nonethough: when you are switching it back to block(or inlineetc) you will have to start drawing the painting but using visibility the browser is just scratching the last coat of paint and it's back. So visibilityis faster in this case.
display:none但是，当您使用时存在缺点：当您将其切换回block（或inline等）时，您将不得不开始绘制绘画，但是使用可见性，浏览器只是刮擦了最后一层油漆，然后又回来了。所以visibility在这种情况下更快。
But remember one thing when you are using visibility:hiddenthe element retains its position in the flow so the elements around it won't budge.
但是请记住一件事，当您使用visibility:hidden元素时，元素会保持其在流中的位置，因此它周围的元素不会移动。
If you want a technical explanation check David Baron's talk.
如果您需要技术解释，请查看David Baron 的演讲。
回答by Erik Veland
This is quite interesting. So in essence visibility: hiddenis technically the same as opacity: 0?
这很有趣。所以本质上visibility: hidden在技术上是一样的opacity: 0？
I'm no browser maker, but wouldn't it be a huge performance gain if elements that have visibility hidden weren't rendered or painted but instead painted as a transparent square with the dimensions of the element? At least in situations where the dimensions were known.
我不是浏览器制造商，但如果不渲染或绘制隐藏可见性的元素，而是将其绘制为具有元素尺寸的透明正方形，这不是一个巨大的性能提升吗？至少在尺寸已知的情况下。
回答by stecb
With visibility:hiddenthey are all drawn on the screen, but they are not visible by the user.
Instead, with display:nonethey aren't drawn
随着visibility:hidden他们都在屏幕上绘制，但它们不能被用户看到。相反，display:none它们没有被绘制
回答by Quentin
With visibility: hiddentheir sizes have to be computed so the appropriate amount of space can be reserved for them. They are, effectively, still drawn.
随着visibility: hidden它们的尺寸必须计算这样的空间能够将适当量为他们保留。实际上，它们仍然被绘制。
回答by bart
Because display: noneactually removes the elements from the DOM. visibility: hiddenmerely makes them invisible, but they're still there.
因为display: none实际上是从 DOM 中删除元素。 visibility: hidden只是让它们隐形，但它们仍然存在。
You can notice the difference because form input fields that have display: nonewill simply not be included in the form when you submit it; input fields that merely have visibility: hiddenset will still be there. Well, at least, that's my experience -- other browsers maybehave differently.
您可以注意到不同之处，因为display: none当您提交表单时，表单输入字段将不会包含在表单中；仅visibility: hidden设置的输入字段仍将存在。好吧，至少，这是我的经验——其他浏览器的行为可能有所不同。
回答by Evan Mulawski
Using display:none, the browser does not initialize these elements nor render the content. This is not the case when using visibility:hidden, which initializes these elements but just hides them.
使用display:none，浏览器不会初始化这些元素，也不会渲染内容。using 时情况并非如此visibility:hidden，它会初始化这些元素但只是隐藏它们。
