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

If you are toggling between visible and invisible states via javascript then visibility:hidden should be the better performer. Seeing as it always takes up the same amount of space in both visible and hidden states it won't cause a reflow of the elements below it every time you make it appear of disappear. For display:none you are removing it from the flow of the document and then when you set it to display:block you are rerendering it and pushing everything below that element down, essentially laying all that stuff out again.

But if you are doing something like toggling visible states on button presses then you really should be using what suits your needs rather than what performs better, as the performance differences are negligible in such cases. When you are animating with the dom at around 20 times per second THEN you can worry about the performance of visibility:hidden vs display:none.