Menu
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?
422
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
Display none don't reduce the size of the dom, just make the element not visible, like visible hidden, without occupies the visual space. Display none don't improve the performance because the goal of virtual scrolling is reduce the number of the elements into the dom.
Essentially, visibility: hidden will not show the element, but will retain the space it takes up. Whereas display: none completely removes it.
visibility:hidden will keep the element in the page and occupies that space but does not show to the user. display:none will not be available in the page and does not occupy any space. Show activity on this post. It will remove the element from the normal flow of the page, allowing other elements to fill in.
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.
76
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.
34
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.
43
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
27
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.
24
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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
