html - Lots of DOM. Hidden vs display none

Question

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?

Answer 1

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.

See MDC visibility:hidden:

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

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.