If I have lots of DOM on the page and I set them all to display: none, the browser still reacts quickly (scrolling is fast, page feels snappy).
However, if I visibility: hidden the elements, the browser is as slow as if they were all drawn on the screen.
Can someone explain, in detail, why this is the case?
Well in a way, they are drawn (but not really): The browser keeps space for them, so it must consider the items when laying out the visible ones.
The box is invisible (fully transparent, nothing is drawn), but still affects layout. Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
If you specify display: none instead, the browser only has to care about and layout the visible ones. It does not have to take the others into account at all.
Depending on your visible/invisible ratio and the number of elements, this can make a difference.