Reputation: 5869

Lots of DOM. Hidden vs display 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?

Upvotes: 24

Answers (9)

Knu

Reputation: 15136

Imagine a painting.
You have a white background and start drawing an apple with a lot of details for 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.

Upvotes: 16

Felix Kling

Reputation: 816422

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

Upvotes: 27

Mechanic

Reputation: 5380

display: none: element will not be included in render tree

visibility: hidden: element will be included in render tree (and layout process) but won't be painted in the end thus it is computationally more expensive.

Upvotes: 3

Erik Veland

Reputation: 737

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.

Upvotes: 4

bart

Reputation: 7767

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.

Upvotes: 0

Evan Mulawski

Reputation: 55334

Using display:none, the browser does not initialize these elements nor render the content. This is not the case when using visibility:hidden, which initializes these elements but just hides them.

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

Upvotes: 0

Quentin

Reputation: 943569

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.

Upvotes: 2