2

OK I'm making the assumption that if you have fifty images already loaded on a page, and you send the user on an animated scroll across an expanse of them, that there is some performance increase by having them hidden...or am I totally off base there? It seemed to be the case in Flash apps.

Anyway, if I'm not wrong...is there any performance difference between hiding those images with display: none, opacity: 0 or visibility: hidden?

Zando
  • 5,473
  • 8
  • 30
  • 37
  • please try your assumptions and check the performance gain, in my opinion display:none is best. – Asad Rasheed Jun 22 '11 at 20:18
  • Performance aside, you'll have other issues to decide upon: Using `visibility` or `opacity` the element still takes up space in the content flow even though you cannot see it. Using `display:none;` takes the element out of the content flow entirely. – Sparky Jun 22 '11 at 20:18
  • You simply cannot compare these by performance as they are all entirely different things. – BoltClock Jun 22 '11 at 20:26

1 Answers1

4

Performance impact is something that would be measured by browser rendering engine, and that may have divergent answers. From my experience though, the rendering lag experienced when rapidly scrolling a page is reduced by hiding elements. By how much, I can't quantify, as I've never done tests.

Remember that display: none does not leave whitespace, whereas visibility: hidden and opacity: 0 both do. If you use display: none, several elements on your page will shift into the empty space left by the hidden elements, and will shift back out when you make the images reappear. It doesn't seem to be a good choice if you want to keep the transition smooth. You can find a full list of the differences in another question.

This closely related question regarding DOM performance may be of interest to you as well.

Community
  • 1
  • 1
Frank Crook
  • 1,466
  • 12
  • 19
  • Thanks, yes I do know about the problem with display:none, but I had wondered if that flaw had an upside in performance to make up for its annoyance. if it was a significant improvement, I suppose one could use JS to wrap a sized div around the image as a placeholder – Zando Jun 22 '11 at 23:37