Read size of current document from Javascript

Question

I'm starting to play around with Boomerang for measuring performance. It's very promising. While it allows me to measure latency, bandwidth and page load times, I'm also interested in trying to get the time it took to render the initial HTML page server-side. Wile it seems straightforward to log the time at which the browser started parsing the javascript (which is close to when it initally arrived) in order to get an estimate of the server time, I need to work out how much network time to deduct. So to do that, I need to know how large the html document is.

How can I tell this from Javascript?

The document object does not appear to have an innerHtml property

I tried

totsize=document.HEAD.innerHTML.length + document.BODY.innerHTML.length;

The HEAD and BODY entities appear in the DOM browser within Firefox - but when I try the code above I get an undefined error - also tried with 'head' - to no avail.

Any ideas?

(note that javascript is in a seperate file and will be cached in most cases - so that's not a big problem).

I did try google - but I just get lots of pages describing the on-screen size of html elements and the window dimensions :(

TIA

Answer 1

How about document.documentElement.innerHTML.length ?

Answer 2

document.documentElement.innerHTML.length as per @meder is probably good enough. It won't be exact because it returns a serialisation of the current page DOM and not the original HTML source.

For static pages that won't matter as it'll just be the case of an extra close tag here, different attribute quoting there... but if there's lots of page content created on the fly from script, that content will count in innerHTML despite not being present in the original source, which could throw your calculation out.

If you need to find out the actual resource length, you'd need to fetch the page again, which you could do using an XMLHttpRequest on the current URL:

var xhr= new XMLHttpRequest();
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    alert(this.responseText.length);
};
xhr.open('GET', location.href, true);
xhr.send();

(This can't be done if the page is the result of a POST request though.)

This will give you a size in characters. If you are using an single-byte encoding like ISO-8859-1, the network-load byte size will be the same. If you're using UTF-8, then you can find out the byte size by converting the string to UTF-8-bytes-as-code-units, for which there's a quick idiomatic hack:

var bytes= unescape(encodeURIComponent(this.responseText));
alert(bytes.length);

If you are unfortunate enough to be using a non-UTF-8 multibyte encoding you can't really do much here; you'd have to include full mapping tables for the encoding, which for East Asian encodings would be insanely large.