Lire la taille du document courant de Javascript

Question

Je commence à jouer avec Boomerang pour mesurer la performance. C'est très prometteur. Bien que cela me permette de mesurer la latence, la bande passante et les temps de chargement de la page, je suis également intéressé par le temps nécessaire au rendu de la page HTML initiale côté serveur. Wile il semble simple de noter l'heure à laquelle le navigateur a commencé à analyser le javascript (qui est proche de son arrivée initiale) afin d'obtenir une estimation de l'heure du serveur, j'ai besoin de calculer le temps réseau à déduire. Pour ce faire, j'ai besoin de connaître la taille du document html.

Comment puis-je le dire à partir de Javascript?

L'objet document ne semble pas avoir une propriété innerHtml

J'ai essayé

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

Les entités tête et le corps apparaissent dans le navigateur DOM au sein de Firefox - mais lorsque je tente le code ci-dessus je reçois une erreur non définie - également essayé avec 'tête' - en vain.

Des idées? (Notez que javascript est dans un fichier séparé et sera mis en cache dans la plupart des cas - ce n'est donc pas un gros problème).

J'ai essayé google - mais je viens d'obtenir beaucoup de pages décrivant la taille à l'écran des éléments HTML et les dimensions de la fenêtre :(

TIA

Answer 1

Que diriez-vous document.documentElement.innerHTML.length

Answer 2

document.documentElement.innerHTML.length comme? par @meder est probablement assez bon.Il ne sera pas exacte parce qu'il renvoie une sérialisation de la page courante DOM et pas de la source HTML d'origine

Pour les pages statiques qui n'auront pas d'importance car ce sera juste le cas d'une balise extra close ici, d'un attribut différent ici ... mais s'il y a beaucoup de contenu de page créé à la volée à partir du script, ce contenu comptera innerHTML bien que n'étant pas présent dans la source d'origine, ce qui pourrait jeter votre calcul.

Si vous avez besoin de connaître la longueur réelle des ressources, vous aurez besoin de chercher à nouveau la page, que vous pouvez faire en utilisant un XMLHttpRequest sur l'URL actuelle:

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

(Ce ne peut pas être fait si la page est le résultat d'une demande POST cependant.)

Cela vous donnera une taille en caractères. Si vous utilisez un codage codé sur un octet comme ISO-8859-1, la taille de l'octet de charge réseau sera la même. Si vous utilisez UTF-8, vous pouvez trouver la taille en octets en convertissant la chaîne en UTF-8-octets-as-codes-unités, pour lesquelles il y a un hack idiomatiques rapide:

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

Si vous avez la malchance d'utiliser un codage multi-octets non-UTF-8, vous ne pouvez pas vraiment faire grand-chose ici; il faudrait inclure des tables de mapping complètes pour l'encodage, ce qui serait incroyablement grand pour les encodages en Asie de l'Est.

Answer 3

Que pensez-vous de cela?:

/* 
* 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'); 

Cela semble fonctionner, mais pas génial. Comme il donne deux longueurs différentes. Mais pourquoi? Pouah! Cette mise en forme me tue.

EDIT: Quelqu'un peut-il corriger ce formatage? Mon navigateur ne fonctionne pas correctement, apparemment. Firefox 15.x

EDIT: fixe le formatage