CODEWITHSUNDEEP
javascript
frenchie
frenchie

Reputation: 52017

removing unused DOM elements for performance

I'm writing a single page application. When the page is initially served, it contains many DOM elements that contain json strings that I'm injecting into the page.

When the page loads on the client, the first thing that happens is that these DOM elements are parsed from json to javascript objects and then they're never used again.

Would there be a performance benefit into deleting them from the DOM and reducing its size? I haven't found any conclusive data about this aspect. For info, these elements are about 500K in size.

Thanks for your suggestions.

Upvotes: 6

Views: 1550

Answers (2)

Pointy
Pointy

Reputation: 413895

Independent of whether you pull the JSON from the DOM, you might consider this technique for including your JSON objects:

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

Browsers will completely ignore the contents of those scripts (except of course for embedded strings that look like </script>, which it occurs to me as things a JSON serializer might want to somehow deal with), so you don't risk running into proplems with embedded ampersands and things. That's probably a performance win in and of itself: the browser probably has an easier time looking for the end of the <script> block than it does looking through stuff that it thinks is actual content. You can get the content verbatim with .innerHTML.

Upvotes: 1

Kristian
Kristian

Reputation: 21830

Would there be a performance benefit into deleting them from the DOM and reducing its size?

In terms of the performance of the DOM, generally, the less you interact with your DOM, the better.

Remember that your selectors traverse the dom, so if you use inefficient selectors, it will be poor performance no matter what, but if you're selecting elements by ID rather than class or attribute wherever possible, you can squeeze good performance out of the page, regardless of whether you've deleted those extraneous markup items.

When the page is initially served, it contains many DOM elements that contain json strings that I'm injecting into the page.... For info, these elemnts are about 500K in size.

In terms of page load, your performance is suffering already from having to transfer all of that data. if you can find a way to transfer the json only, it could only help. Deleting after the fact wouldn't be solving this particular problem, though.

Upvotes: 4

Related Questions