1

Which one is best optimized code display:none or visibility:hidden as per the performance?

.className{
  display: none;
}
.className{
  visibility: hidden;
}
Tushar
  • 85,780
  • 21
  • 159
  • 179
Pramod Bhoi
  • 197
  • 1
  • 7
  • 2
    The performance difference will be minute, it'll not matter, what matters is that `visibility: hidden` will leave the space occupied, whereas `display: none` will not. If you are so (hyper) conscious about performance, you'll definitely get thousands of improvement areas. – Tushar Sep 15 '15 at 06:35
  • 1
    possible duplicate of [Performance differences between visibility:hidden and display:none](http://stackoverflow.com/questions/11757016/performance-differences-between-visibilityhidden-and-displaynone) – NooBskie Sep 15 '15 at 06:51
  • On initial rendering, `display: none;` will be much faster because the element can simply be ignored for the rendering process. `visibility: hidden:` will be much faster once you make the part visible since the browser has already done all the dimensional calculations before. – connexo Sep 15 '15 at 07:03

3 Answers3

2

visibility:hidden would be the more efficient as it does not change the flow of the DOM, reducing the amount of redraws.

Switching an element's display property would cause greater redrawing as space isn't allocated for the element. This would occur most with stacked elements.

Papa
  • 1,628
  • 1
  • 11
  • 16
1

It depends on the requirement..if you want to show the element when user interact with the page then visibility:hidden can be useful otherwise display:none is useful.

visibility:hidden takes the space provided to it though it is not visible but display:none remove the space and allow other element to take the space.

roemel
  • 3,247
  • 4
  • 29
  • 52
Abhisek Tripathy
  • 41
  • 3
-1

I think display:none is that property which makes tag not to appear on the page but space is not allocated.

And visibility:hidden is that property which makes the tag not visible but space is allocated.

Amit singh
  • 2,006
  • 1
  • 13
  • 19
  • Not my downvote, but the question is specifically about performance. You just describe what the properties do but say nothing about performance. – JJJ Sep 15 '15 at 18:35