Performance implications when hiding a DIV by rendering it on the screen

Question

What are the performance implications of hiding the complex part of an HTML document in a turned off DIV screen, for example:

<div style="position:absolute;top:-10000px;left:-10000px;"> Lots of HTML here... </div> 

compared to using "display: none" or "visiblity: hidden"?

Is there a penalty for using performance / memory? How bad is it? Could this be appropriate if the goal is mobile browsers (iPhone / Android)?

Answer 1

It depends on the browser. Here's a good article on rendering, rescheduling redraws in browsers. Therefore, theoretically, this should not be displayed if something has changed on the side, since all elements with absolute positioning will not be reradiated if something changes in the parent elements. Therefore, it should work better than the display: none, which will be replayed in IE . But you still have many DOM elements in browser memory. Therefore, it might be better to put elements from the DOM and add them later.

Answer 2

In terms of performance, you would best create your HTML as a string by inserting it into the DOM at a time. The DOM modifies the trigger redraw, so the less the DOM changes, the better.