views:

32

answers:

1

For sites with very large numbers of DOM elements, is there be any performance benefit to presenting some of the content within an iframe? For example, the application I'm working on has a very large html-based tree which could contain tens of thousands of nodes at one time (albeit not loaded all at once). Putting aside the usability problems a tree this size presents, would there be any benefit to placing this content within an iframe, rather than within the main page? Do browsers handle memory differently for content embedded within iframes? Would this improve jquery selector performance by isolating this content? I'm most interested in how this applied to IE 7, although I would be curious if it differs between browsers.

+1  A: 

+1 for a good question. I'm not aware of any differences in memory handling between frames and non-frames based content; I've written a few XHTML parsers and memory is memory; nodes take up memory regardless of where they are stored. All ID lookups are done by keys (hashtable), so the collections can be quite large with a non-linear impact.

That's the parsing and memory side; However, I've found that the rendering times can suffer on large innerHTML inserts, so try to use the document.createElement pattern instead (if applicable). I experienced this behavior in a variety of browsers, including IE7.

Where the DOM elements originate also matters. Are all the nodes rendered server-side, or do you send JSON to the client and create the tree in JavaScript? I can confirm that properly constructed JavaScript object trees can handle thousands of nodes very efficiently, so if your rendering scheme is client-based and all the nodes aren't displayed at once, the actual DOM will be much smaller.

The real decision point would be round-tripping. If you are rebuilding a complex page over and over, then that may be justification enough for breaking it out into frames, so that all that content doesn't need to be sent over the wire again and again.

Tim
I agree, and that's why it breaks my heart that frames/iframes have developed such a bad reputation. Speaking from the view of rendering and transmission time, especially for slow CPUs or slow network connections, the only really efficient way to factor out common constant content from a page is with frames of some kind.
Reinderien
Errr, that's not true at all, use Ajax and replace a given element's contents with the HTML snippet you retrieve. Or even better, use Ajax to get JSON and build HTML with that.
Domenic
@Domenic - agreed, see my comment about JSON and the associated efficiency. My point about frames was that if all the HTML is generated server-side, and changing the model is not possible, then a frameset or iframe might be faster.
Tim
"Might be" is the key though---that's why I recommended test in my comment on the original post. It seems very implementation-specific whether using the iframe page-loading facilities or Ajax + DOM insertion would end up being faster. There might also be wall-clock vs. subjective experience issues too.
Domenic