¿Carga rápido tu página?

Este tutorial es casi una frivolidad, pero puede servir para empezar a conocer un poco del objeto date() y el método getTime() de JavaScript.
La idea es conseguir mostrar cuánto tiempo ha tardado la página en cargarse, algo de lo que uno se puede sentir orgulloso si ha hecho las cosas bien o que es mejor esconder. La idea me vino de algo que se ve habitualmente en muchos sitios que utilizan PHPNuke y se me ocurrió que se podía hacer algo parecido con JavaScript.

El método getTime() devuelve un valor en milisegundos, contados a partir del 1 de enero de 1970, pero para ello debemos crear una variable que almacene la fecha que queramos comprobar. Si no le indicamos una fecha como parametro, tomará como valor el momento actual. Si le pasáramos una fecha nos diría los milisegundos que han pasado desde ese 1 de enero de 1970. Por ejemplo, si quisieramos saber cuántos han pasado hasta el 15 de mayo de 1980 a las 13:45, escribiríamos:

laFecha=new date("May 15, 1980 13:45:00");//creamos la variable
losMilisegundos=laFecha.getTime(laFecha)//capturamos los milisegundos
document.write(losMilisegundos);//y los escribimos

Utilizaremos, aparte de nuestra propia función, algunas que ya nos ofrece Dreamweaver, ya que el tiempo que ha tardado en cargar aparecerá en una capa (tranquilos, no tendremos que colocarla, lo hará sola).Empecemos:

Estos scripts deben ir lo más cerca posible del encabezado del documento, para que el tiempo empiece a contar lo antes posible. Los dos últimos son de Dreamweaver : setTextOfLayer() y MM_findObj():

<script language="JavaScript">
//estas 2 lineas se ejecutan al cargar, ya que estan fuera de una funcion
var elInicio=new Date();//creamos el momento actual
var antes=elInicio.getTime()//sacamos su hora em milisegundos
//nuestra funcion
function cuantoTardo(){
var elFinal=new Date();//capturamos el momento actual en milisegundos
var despues=elFinal.getTime();
var diferencia=despues-antes;
var total="tiempo de carga:"+Math.round(diferencia/1000)+"segundos.";//redondeamos
MM_setTextOfLayer('cronometro','',total);//lo escribimos en la capa "cronometro"
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
if ((obj=MM_findObj(objName))!=null) with (obj)
if (document.layers) {document.write(unescape(newText)); document.close();}
else innerHTML = unescape(newText);
}
</script>

Usuarios que han visto este tema también han visto...

- Menu desplegable con enlace con Javascript
- Etiqueta desplazándose por el explorador en JavaScript
- Scroll de noticias con Javascript
- Función createElement y appendChild en Javascript
- Abrir una ventana cuando otra es cerrada con Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento