DOM memory and CPU management

Question

I am creating a progressively built single-page (if Javascript is enabled) "blog" which uses AJAX to request HTML for new pages the user is navigating to.

When the user navigates to new pages they will be added one after another into the DOM in a small window with "overflow: hidden;":

<div id="foo" style="width:200px; height:100px;">
  <div id="bar" style="width:999999px">
  </div>
</div>

When an AJAX call returns success a div will be appended into #bar.

How will it affect the browser when there are a lot of hidden pages outside the #foo width?

Do I need to remove the divs from the DOM as the user navigates away from them? Then I will need to make a new AJAX request if the user chooses to navigate to them again. :(

Thanks

Willem

Answer 1

No matter what people say GC will do for you, whether in JavaScript or C# or Java, watch out and forget the silly promise of automatic management. Clean it up explicitly and sleep well.

Very simple reason: closures leak and leak pretty bad the moment you move out of most simplistic scenarios (the case both for brower's JavaScript as well as C#/java).

Answer 2

Modern browser layout engines are generally smart enough to not process elements that are hidden, so it won't take much CPU power. However, adding large numbers of nodes with highly complex object graphs can be expensive in some browsers, so I'd be careful with this. Also note that even if they're not laid out, they're still there as part of the DOM, and memory usage could conceivably become a concern if these nodes are large.