I want to simplify things in my jQuery Backbone.js web application. One such simplification is the behavior of my menu and dialog widgets.
Previously I created the div boxes of my menus at start and hid them using
display: none; opacity:0;. When I needed a menu, I changed its style to
display:block then used the jQuery ui position utility to position the div box (since elements with
display:none cannot be positioned) and when it was done, finally changed its style to
Now I want to just hide them with
visibility:hidden, and when I need one, I use the position utility and then change the style to
visibility:visible. When I begin using this new approach, I will have around 10 div boxes throughout the web application session that are hidden but occupy space, in contrast to the previous div boxes hidden with
What are the implications of my new approach? Does it effect browser performance in any regard?
I'm not aware of any performance difference between
visibility:hidden - even if there is, for as little as 10 elements it will be completely negligible. Your main concern should be, as you say, whether you want the elements to remain within the document flow, in which case
visibility is a better option as it maintains the box model of the element.
display:none; elements are not in the render tree all, so they will perform better at face value.
I doubt you will have any real visible performance problems from this though. If you need
opacity: 0 or
visibility: hidden because of their functionality, then just use them. If you don't need the functionality, then use
But if you are doing something like toggling visible states on button presses then you really should be using what suits your needs rather than what performs better, as the performance differences are negligible in such cases. When you are animating with the dom at around 20 times per second THEN you can worry about the performance of visibility:hidden vs display:none.
visibility: hidden does not cause a re-flow on the document, while
display: none does.
display: none: The HTML engine will completely ignore the element and its children. The engine will not ignore elements marked with
visibility: hidden, it will do all the calculations to the element and its children, the exception is that the element will not be rendered to the viewport.
If the values for position and dimensions properties are needed then
visibility: hidden have to be used and you have to handle the white space in the viewport, usually by wrapping that element inside another one with 0 width and height and 'overflow: hidden'.
display:none will remove the element from the document's normal flow and set the values for position/height/width to 0 on the element and its children. When the elements
display property is changed to other value than
none, it triggers a complete document re-flow, which can be a problem for big documents - and sometimes not-so-big documents being rendered on hardware with limited capabilities.
display: none is the natural and logical solution to use when hiding elements on the viewport,
visibility: hidden should be used as a fallback, where/when needed.
As pointed by @Juan,
display: none is the choice to go when what you need is to add many elements to the DOM tree.
visibility: hidden will trigger a re-flow for each element added to the tree, while
display: none will not.
Well, the main performance difference between
display: block and
visibility: hidden is that if you have a list of, say, 100000 elements, the
visibility: hidden won't save you from DOM hanging because it doesn't remove elements from DOM.
visibility: hidden acts like
opacity: 0 +
display: none acts like
Live example: https://jsfiddle.net/u2dou58r/10/
From personal experience having just tried both on a simple static page with a form located beneath a "hidden" button,
visibility: hidden performs flawlessly whereas
display: none causes clickable buttons to slightly jump upon clicking, as if it tries to show the hidden button for a millisecond.
Well, visibility:none still uses the space of the div. So you could maybe skip the positioning part because its place is already allocated (and by that get a better performance).
But I somehow guess that you need your display:none approach to allocate space correctly when the "show" event is triggered.
I think this could be somehow related to this question: CSS Properties: Display vs. Visibility
I'll just quote the interesting part:
the element is NEVER removed from the DOM hierarchy. All block level display 'styles' are completely 'hidden' when using display:none, whereas with visibility:hidden; the element itself is hidden but it still occupies a visual space in the DOM.
So there should be no real difference in regard to browser performance, because both versions are still in the DOM hierarchy. These properties only affect how an element is displayed in regards to the DOM.
©2020 All rights reserved.