In an HTML page with many already-loaded images, is there a difference between using CSS display/opacity/visibility to hide them, performance wise?

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 ba开发者_Python百科se 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?

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.