javascript - Performance differences between visibility:hidden and display:none

Question

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 opacity:1.

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 display:none.

What are the implications of my new approach? Does it effect browser performance in any regard?

Answer 1

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 display: none;