2

I am working on a web application that dynamically builds the UI by manipulating the HTML DOM with JavaScript.

I would like take action - such as clearing out old information - if the size of the document being built is getting too big (assume some arbitrary figure).

Is it possible to programmatically query the DOM to know what the size of the DOM is - either as bytes of equivalent HTML text (i.e file size), or ideally as amount of memory taken up by the DOM?

Vihung
  • 12,947
  • 16
  • 64
  • 90
  • `document.documentElement.innerHTML.length`? – georg Oct 08 '13 at 10:17
  • There is no memory interface available, no. Of course you can always serialize it to HTML (and get the string's `.length` then), but I wouldn't recommend to do that on huge documents often. – Bergi Oct 08 '13 at 10:19
  • 1
    I don't think it would help you to get the size of the DOM, because you don't know how much memory is available. A size that is acceptable at one client might not work at another. – Bergi Oct 08 '13 at 10:20
  • Adding to @Bergi you will also need some code to determine what is old and unused and what is old as is still in use. Keeping track of that information will in itself take a lot of memory. –  Oct 08 '13 at 10:24

2 Answers2

3

I'd try something like this:

window.document.documentElement.innerHTML.length

But to be honest, it is much more complicated than this. It will return the quantity of characters. To get the size of the document, you'd have to actually check the charset/encoding used by the document.

UTF-8 will have 1 bytes for each ASCII char. Anything that isn't ascii might be from 2 to 6 bytes big. If the document is in a different encoding, the size of each char is going to be different. UTF-16 will have 2bytes per char and UTF-32 -> 4 bytes.

One way to "guess" the size of the document would be to scan each char contained in the result of the snippet above. Anything that isn't ascii will have at least 2 bytes for utf-8 (it's unlikely to be more than 2 bytes unless you have chineese or really strange languages in the document). Even that doesn't tell how much space it takes in memory because the text might take more space than the DOM objects. Parsing the whole tree as a String is going to use memory two but it shouldn't be that much heavy if done right and how big is the document.

If you want to know how much space the page is taking in "memory" in the DOM, it will not be possible as each DOM element is dependent specific and there is no API that gives you access to internally.

If for whatever reason, this is a big deal. You could have a look at XPCOM and you could build your own API that returns the amount of memory used in the DOM.

But you should think out of the box

The problem you're having is unlikely because the page is big. But because some JS is creating a lot of dom object. Use a profiler to watch how is the page built and you could possibly consider this: Do we have to keep all the objects attached to the document? If the page is getting big at some place, you could limit the amount of element shown in a block and keep the data in memory. Rebuild the DOM objects when they are needed. Keep data in your js code. If some data is getting unused, you could just forget it or store them inside indexeddb. Reload it from there when needed.

Don't hide dom objects using "display: none". Build DOM objects only when they are required. If you have hidden DOM objects all over the place.

Community
  • 1
  • 1
Loïc Faure-Lacroix
  • 13,220
  • 6
  • 67
  • 99
  • 1
    Simply refer to http://stackoverflow.com/questions/2219526/how-many-bytes-in-a-javascript-string for byte measurements… – Bergi Oct 08 '13 at 10:29
1

Calculating available memory might not be possible because Javascript (browser environment) runs in a sandbox, it has no access to system resources therefore you can't detect memory usage but you can definitely calculate page size and number of available elements etc:

( document ).ready(function() {
        var pageSize = $('html').html().length;
        var kbytes = pageSize / 1024;
    }
);

Or you can take some actions based on number of elements on page:

$( "*" ).length
Gurpreet Singh
  • 20,907
  • 5
  • 44
  • 60
  • Since JS strings are UTF-8, a single char does not necessarily take exactly 8 bits. I would avoid the notion of `kbytes`, it creates [false precision](https://en.wikipedia.org/wiki/False_precision). [You can get numbers](http://stackoverflow.com/questions/2219526/how-many-bytes-in-a-javascript-string), I don't think it's needed here. – Bergi Oct 08 '13 at 10:27