很多DOM。隐藏和显示无 [英] Lots of DOM. Hidden vs display none

问题描述

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

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).

但是，如果我的可见性：隐藏元素，浏览器就像它们都在屏幕上绘制一样慢。

However, if I visibility: hidden the elements, the browser is as slow as if they were all drawn on the screen.

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

Can someone explain, in detail, why this is the case?

推荐答案

请参阅 MDC visibility：hidden ：

框是不可见的（完全透明，没有绘制任何内容），但仍然会影响布局。如果元素的后代具有可见性：visible（在IE直到版本7中这不起作用），元素的后代将可见。

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).

如果你指定 display：none ，浏览器只关心和布局可见的。

If you specify display: none instead, the browser only as to care about and layout the visible ones. It does not have to take the others into account at all.

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

Depending on your visible/invisible ratio and the number of elements, this can make a difference.

这篇关于很多DOM。隐藏和显示无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！