Wolfgang Adamec Wolfgang Adamec - 9 months ago 142
HTML Question

Performance differences between visibility:hidden and display:none

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
then used the jQuery ui position utility to position the div box (since elements with
cannot be positioned) and when it was done, finally changed its style to

Now I want to just hide them with
, and when I need one, I use the position utility and then change the style to
. 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 display:none and 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.