大量 DOM。隐藏与显示无

Question

如果页面上有很多 DOM，并且我将它们全部设置为 display: none，浏览器仍然反应很快（滚动速度很快，页面感觉很快）。

但是，如果我visibility:隐藏元素，浏览器就会像它们全部绘制在屏幕上一样慢。

有人可以详细解释为什么会出现这种情况吗？

Answer 1

在某种程度上，它们是被绘制的（但不是真的）：浏览器为它们保留空间，因此在布局可见的项目时必须考虑这些项目。

参见 MDC

visibility:hidden

：

盒子是不可见的（完全透明，没有绘制任何东西），但仍然影响布局。 如果元素的后代具有可见性：可见（这在 IE 7 及以下版本中不起作用），则它们将可见。

如果您指定

display: none

，浏览器只需要关心和布局可见的。根本不需要考虑其他的。

根据可见/不可见比率和元素数量，这可能会产生影响。

Answer 2

想象一幅画。
你有一个白色的背景，并开始在一个小时内画一个有很多细节的苹果，然后你用另一层白色油漆完全覆盖它。 那就是

visibility

。

display:none

就像从一开始就不画一样。当然，第一次加载速度会更快。

使用

display:none

时也有缺点：当您将其切换回

block

（或

inline

等）时，您将必须开始绘制绘画，但使用可见性，浏览器只是刮掉最后一层。油漆它就回来了。所以在这种情况下

visibility

更快。

但是请记住一件事，当您使用时

visibility:hidden

元素会保留其在流中的位置，因此 它周围的元素不会移动。

如果您想要技术解释，请查看David Baron 的演讲。

Answer 3

这很有趣。所以本质上

visibility: hidden

在技术上与

opacity: 0

相同？

我不是浏览器制造商，但是如果不渲染或绘制隐藏可见性的元素，而是将其绘制为具有元素尺寸的透明正方形，这不是会带来巨大的性能提升吗？至少在尺寸已知的情况下是这样。

Answer 4

使用

visibility:hidden

它们都绘制在屏幕上，但用户不可见。 相反，使用

display:none

它们不会被绘制

Answer 5

display: none

：元素不会包含在渲染树

中

visibility: hidden

：元素将包含在渲染树（和布局过程）中，但最终不会被绘制，因此计算成本更高。

Answer 6

使用

visibility: hidden

时，必须计算它们的大小，以便为它们保留适当的空间。实际上，它们仍然被吸引。

Answer 7

因为

display: none

实际上是从 DOM 中删除元素。

visibility: hidden

只是让它们看不见，但它们仍然存在。

您可以注意到其中的差异，因为当您提交表单时，带有

display: none

的表单输入字段将不会包含在表单中；仅设置了

visibility: hidden

的输入字段仍然存在。嗯，至少，这是我的经验 - 其他浏览器可能表现不同。

Answer 8

“浏览器速度慢得就像它们都画在屏幕上一样。”

我认为这很慢，因为标签仍然呈现，但在屏幕上看不到。

看看这个

Answer 9

使用

display:none

，浏览器不会初始化这些元素，也不会渲染内容。使用

visibility:hidden

时情况并非如此，它会初始化这些元素，但只是隐藏它们。

http://wiw.org/~frb/css-docs/display/display.html