Take the 2-minute tour ×

This question already has an answer here:

I have a big data enclosed in div.using some priority of log in I will make visible or invisible(using javascript). But my question is which property, whether visibility or display none is better for fast loading of page?

share|improve this question

marked as duplicate by Kami, Sparky, mc10, Alohci, Michael Kohne Sep 2 '13 at 23:03


Two totally different properties. If they were the same, we'd only have one of them. –  Sparky Sep 2 '13 at 17:23
Thanks, but I already understand the differences between the two properties. –  Sparky Sep 2 '13 at 17:26

4 Answers 4

up vote 3 down vote accepted

The properties visibility and display are not the same.

Visibility hides the element but it will continue to affect the layout of the page.

Display will hide the element and will not affect the layout.

In terms of speed, the difference would be negligible. So you should focus on which affects the usability of the site.

share|improve this answer

the difference is that visibility keeps the space of the element as if it was displayed you just dont see it, display none means it's not displayed at all

share|improve this answer

When you make an object invisible it will still occupy space in the layout. However, if you set the display to none, it will be hidden and ignored in the layout.

share|improve this answer

While display:none should be slightly faster, because the browser doesn't have to make the calculations to fit that element in the flow of the page, in reality this is only true if you're making lots of after-loading changes to the width/height of the element with JavaScript.

share|improve this answer
