It's worth noting that the HTML5 single-page specification currently contains 109,000 DOM elements (and even more DOM nodes) as of now.
Is it better for design to hide/show HTML pages rather than destroying and recreating them?
The decision largely depends on whether it is necessary (for example, if recreating removed sections would be slow) and/or likely (if user interaction frequently causes hidden sections to be displayed again).
There are a few factors that can impact performance:
a) Garbage collection - More nodes mean more objects for the garbage collector to manage. While modern garbage collectors should handle long-lived objects efficiently, not all browsers have advanced GC mechanisms.
b) Reflow events, DOM queries, traversal operations, etc.
c) JavaScript code scalability with document size - Some algorithms may become inefficient in complex applications. Callbacks triggering additional callbacks can also contribute to slowdown.
While there may not be much you can do about point a), points b) and c) can be optimized in various ways:
- Detach subtrees from the document and store them in JavaScript/document fragments to avoid impacting tree traversals.
- Avoid interleaving actions that read layout state or write to the DOM. Perform reads and writes separately in bulk to minimize reflows.
- Optimize performance hotspots in your JavaScript code.
However, these are general recommendations. It's essential to profile your application to identify CPU-intensive tasks and determine if the bottleneck lies in garbage collection, JavaScript execution, or paint events.