Performance gain by removing already loaded DOM-nodes?

113 Views Asked by At

Assumed a heavy website consists of about 5000 dom nodes – but 20% of them are just used for a limited time of the page-visit. For example just the first 10s and will then be hidden automatically. How will removing those nodes improve the performance of this page in the browser?

I know there are Network efficiency and load performance implications if a page has many dom nodes. It also has implications to the runtime performance, if elements are interacted with or need to be re-computed otherwise. I'm also aware of potential memory performance implications, if there are general query selectors that might have to search / traverse longer.

The question is: Apart from this, practically or theoratically, how will a removal of these dom nodes (instead of just hiding them) improve the performance of a page?

1

There are 1 best solutions below

0
Nickolay On

This depends on the specific content: a thousand of hidden <br> elements will probably not have a measurable effect on anything, while a thousand of document.createTextNode("foobar".repeat(10000000)) nodes will take up 60 GB of memory, and I imagine one could come up with a creative pathological testcase that stresses other subsystems.

Realistically, there probably won't be a noticeable difference between a thousand of display: none nodes and lack of them.

But why don't you measure?