大量的 DOM。隐藏与不显示

Question

如果我在页面上有很多 DOM 并且我将它们全部设置为显示：无，浏览器仍然会快速反应（滚动速度很快，页面感觉很活泼）。

但是，如果我 visibility: hidden 元素，浏览器就像它们都被绘制在屏幕上一样慢。

有人可以详细解释为什么会这样吗？

原文由 Joda Maki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

请参阅 MDC visibility:hidden ：

盒子是不可见的（完全透明，什么也没画），但仍然 影响布局。如果元素的后代具有 visibility:visible，则该元素的后代将可见（这在 IE 7 之前的版本中不起作用）。

如果您改为指定 display: none ，浏览器将只关心和布局可见的。它根本不必考虑其他因素。

根据您的可见/不可见比例和元素数量，这可能会有所不同。

原文由 Felix Kling 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

想象一幅画。

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

display:none 就像从一开始就没有画它一样。当然，它在第一次加载时速度更快。

当你使用 display:none 时有缺点：当你将它切换回 block （或 inline 等）8f 将不得不开始绘制你-使用可见性，浏览器只是刮了最后一层油漆，然后又回来了。所以 visibility 在这种情况下更快。

但是当您使用 visibility:hidden 时请记住一件事，该元素会保留其在流中的位置，因此 它周围的元素不会移动。

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

原文由 Knu 发布，翻译遵循 CC BY-SA 3.0 许可协议