Removing unused DOM elements to execute

Question

I am writing a one-page application. When a page is initially served, it contains many DOM elements that contain json strings that I insert into the page.

When the page is loaded onto the client, the first thing that happens is that these DOM elements are processed from json to javascript objects, and then they are no longer used.

Was there a performance advantage by removing them from the DOM and reducing its size? I did not find any convincing data about this aspect. For information, these items are about 500K in size.

Thanks for your suggestions.

Answer 1

Regardless of whether you pull JSON from the DOM, you can consider this technique for including JSON objects:

<script type='text/json' id='whatever'> { "some": "json" } </script> 

Browsers completely ignore the contents of these scripts (except, of course, for inline strings that look like </script> , what happens to me, how this can associate a JSON serializer with something), so you don’t risk running into proplems with built-in ampersands and things. The performance gain is likely in and of itself: it is probably easier for the browser to search for the end of the <script> block than it is viewing material that, in its opinion, is the actual content. You can get the content verbatim using .innerHTML .

Answer 2

Will there be a performance advantage in removing from the DOM and reducing its size?

As for DOM performance, as a rule, the less you interact with the DOM, the better.

Remember that your selectors intersect dom, so if you use an inefficient selector, it will be poor performance, no matter what, but if you select elements by identifier and not by class or attribute, where possible, you can compress good performance pages, regardless of whether you deleted these extraneous markup elements.

When the page was originally submitted, it contains many DOM elements that contain json strings that I entered on the page .... For information, these elements are about 500 thousand in size ..

In terms of page loading, your performance suffers from having to transfer all this data. if you can find a json-only transfer method this can only help. Removing after the fact will not solve this particular problem, however.