title: Performance differences between visibility:hidden and display:none
body: <p>I want to simplify things in my jQuery Backbone.js web application. One such simplification is the behavior of my menu and dialog widgets.  </p>
  
  <p>Previously I created the div boxes of my menus at start and hid them using <code>display: none; opacity:0;</code>.   When I needed a menu, I changed its style to <code>display:block</code> then used the jQuery ui position utility to position the div box (since elements with <code>display:none</code> cannot be positioned) and when it was done, finally changed its style to <code>opacity:1</code>.  </p>
  
  <p>Now I want to just hide them with <code>visibility:hidden</code>, and when I need one, I use the position utility and then change the style to <code>visibility:visible</code>.  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 <code>display:none</code>.  </p>
  
  <p>What are the implications of my new approach? Does it effect browser performance in any regard? </p>