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

Answer 1

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.

Answer 2

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;