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.

Answer 2

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.

display:none is like not drawing it from the start. Of course it's faster on first load.

There are drawbacks when you are using display:none though: when you are switching it back to block (or inline etc) 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 visibility is faster in this case.

But remember one thing when you are using visibility:hidden the element retains its position in the flow so the elements around it won't budge.

If you want a technical explanation check David Baron's talk.

Answer 3

This is quite interesting. So in essence visibility: hidden is technically the same as 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.

Answer 4

With visibility:hidden they are all drawn on the screen, but they are not visible by the user. Instead, with display:none they aren't drawn

Answer 5

With visibility: hidden their sizes have to be computed so the appropriate amount of space can be reserved for them. They are, effectively, still drawn.

Answer 6

Because display: none actually removes the elements from the DOM. visibility: hidden merely makes them invisible, but they're still there.

You can notice the difference because form input fields that have display: none will simply not be included in the form when you submit it; input fields that merely have visibility: hidden set will still be there. Well, at least, that's my experience -- other browsers may behave differently.