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

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.

EDIT: 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.