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.
views:
32answers:
1+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.