Читать размер текущего документа из Javascript

Question

Я начинаю играть с Бумерангом для измерения производительности. Это очень перспективно. Хотя это позволяет мне измерять задержку, пропускную способность и время загрузки страницы, мне также интересно попытаться получить время, необходимое для рендеринга исходной HTML-страницы на стороне сервера. Пока кажется простым записать время, когда браузер начал синтаксический анализ javascript (который близок к моменту, когда он изначально прибыл), чтобы получить оценку времени сервера, мне нужно выяснить, сколько сетевого времени вычитать. Поэтому для этого мне нужно знать, насколько велик HTML-документ.

Как я могу сказать это из Javascript?

Кажется, что объект документа не имеет свойства innerHtml

Я пытался

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

Объекты HEAD и BODY появляются в браузере DOM в Firefox - но когда я пробую приведенный выше код, я получаю неопределенную ошибку - также пытающуюся с помощью 'head' - безрезультатно.

Есть идеи?

(обратите внимание, что javascript находится в отдельном файле и в большинстве случаев будет кэшироваться - так что это не большая проблема).

Я попробовал Google - но я просто получил много страниц, описывающих размер HTML-элементов на экране и размеры окна: (

1020 * ТИА *

Answer 1

Как насчет document.documentElement.innerHTML.length?

Answer 2

document.documentElement.innerHTML.length согласно @meder, вероятно, достаточно хорош. Он не будет точным , поскольку он возвращает сериализацию DOM текущей страницы, а не исходный HTML-источник.

Для статических страниц это не имеет значения, так как здесь будет только случай с дополнительным закрывающим тегом, с цитированием там другого атрибута ... но если будет много содержимого страницы, созданного на лету из скрипта, это содержимое считать в innerHTML, несмотря на то, что он отсутствует в исходном источнике, что может привести к потере вычисления.

Если вам нужно узнать фактическую длину ресурса, вам нужно будет снова извлечь страницу, что можно сделать, используя XMLHttpRequest на текущем 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();

(Этого нельзя сделать, если страница является результатом запроса POST.)

Это даст вам размер символов. Если вы используете однобайтовую кодировку, такую ​​как ISO-8859-1, размер байта загрузки сети будет таким же. Если вы используете UTF-8, то вы можете узнать размер байта, преобразовав строку в UTF-8-байтов-как-кодовые единицы, для чего есть быстрый идиоматический взлом:

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

Если вам не повезло использовать многобайтовую кодировку не-UTF-8, вы не сможете здесь многое сделать; для кодировки вам придется включить полные таблицы сопоставления, которые для восточноазиатских кодировок будут безумно большими.

Answer 3

Как насчет этого:

/*
* This script determines the size of the current page in bytes.
* But why does the 2nd length differ from the first?
*/
var len=document.getElementsByTagName("html")[0].innerHTML.length;
var len2=document.getElementsByTagName("head")[0].innerHTML.length + document.getElementsByTagName("body")[0].innerHTML.length;
//document.body.innerHTML.length
alert('Page Size: '+len +' bytes');
alert('Page Size2: '+len2+' bytes');

Кажется, все работает нормально, НО НЕ здорово.Как это дает две разные длины.Но почему?Тьфу!Это форматирование убивает меня.

РЕДАКТИРОВАТЬ: Может кто-нибудь исправить это форматирование?Похоже, мой браузер работает неправильно.Firefox 15.x

РЕДАКТИРОВАТЬ: исправлено форматирование