Question

I have my body tag fill the browser window and it has a collection of div elements I’ll refer to as screens. Only one screen is displayed at a time, filling the body tag, and the other screens sit off the edge of the browser view port. I want to know whether I should set them to display:none; to save the browser doing anywork rendering them. Or does the browser already know they are off screen and leave them alone until they come back on?

Answer 1

link shows that display:none elements do not get inserted to the render tree and so performance gains may be achieved by setting off screen elements to display:none.