2009-07-31 11 views
10

Quiero calcular el tiempo de carga de la página; Esto significa desde el segundo 0 (se cargó un pequeño fragmento de jquery) hasta el segundo x, cuando se carga toda la página.página tiempo de carga con Jquery

Me pregunto si alguno tuvo una experiencia con él, también ideas de cómo implementar correctamente será apperciated.

favor no necesito una extensión, ya tengo Firebug, necesito una solución js

gracias :)

Respuesta

21

Como han mencionado otros, esto no va a ser terriblemente preciso. Pero esto debería funcionar razonablemente.

En su <head>, es decir, tan pronto como sea posible:

<script> 
    var startTime = (new Date()).getTime(); 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    $(window).load(function() { 
     var endTime = (new Date()).getTime(); 
     var millisecondsLoading = endTime - startTime; 
     // Put millisecondsLoading in a hidden form field 
     // or Ajax it back to the server or whatever. 
    }); 
</script> 

La clave es este comportamiento, from the jQuery docs:

cuando se une al elemento de ventana, los activa el evento cuando el usuario El agente finaliza la carga de todo el contenido dentro de un documento , que incluye ventana, marcos, objetos e imágenes .

+0

agregará mike houston tip para agregar la primera línea de javascript en la "cabeza", esto aumentará la precisión –

+0

Oh, buen punto Me acabo de dar cuenta de que estaba asumiendo que jQuery se cargó primero, mientras que en realidad debería cargarse en medio los dos fragmentos de código. – Domenic

0

podrías ser mejor usar un plugin para el navegador? Cálculo con JavaScript necesariamente subestimará el tiempo de carga de la página, ya que no incluirá el tiempo para cargar el fragmento jQuery, y no incluirá el tiempo entre el navegador que envía la solicitud y el servidor web que responde.

Hay un complemento Load Time Analyzer para Firefox.

+0

no lo quiero para cada navegador; esto es porque voy a reunir todo el tiempo de carga y hacer análisis con ellos más tarde –

0

Si usted está haciendo esto con el propósito de optimización, entonces le sugiero que el uso de Yslow. Es una extensión Firebug-Firefox. Puede mostrarle el tiempo de carga de la página y mucha otra información útil.

-2

que realmente no puede hacer esto con jQuery desde $(document).ready(); incendios cuando la página se ha cargado.

Usted puede hacer esto con la YSlowFirebug plug-in para Firfox. Si desea que esto funcione en todos los navegadores, deberá agregar el código del servidor para mostrar cuánto tardó cuando el primer elemento se escribió en el elemento inferior.

Si eso no es lo que le gustaría que usted puede utilizar una herramienta como Selenium y escribir una prueba para capturar el momento de open hasta el final de waitForPageToLoad. El selenio funciona en todos los navegadores

+0

muy intensivo, buscando algo fácil y simple, navegará aunque –

+0

no es realmente intensivo en absoluto, pero lo he estado usando durante años. Hay algunos tutoriales de Selenium en http://www.theautomatedtester.co.uk/selenium_training.htm – AutomatedTester

+0

Todo lo que necesito es unas pocas líneas, un marco completo no es realmente productivo si tiene un objetivo muy pequeño; ¿Qué mejor que escribir 3 líneas de Javascript o 1 línea en Jquery? –

1

Dado que las secuencias de comandos se ejecutan en cuanto se analizan, sugiero que se pone una etiqueta de script justo dentro de la cabecera, a continuación, la secuencia de comandos para enlazar el evento de carga de página después de que haya cargado jQuery:

<html> 
<head> 
    <script> 
     // Capture start time 
    </script> 
    ... 
    <script src="jquery.js" /> 
    <script> 
     $(window).load(function() { 
     // Capture end time 
     }); 
    </script> 
... 

De esta forma, debería poder capturar tanto tiempo de carga de la página como sea posible.

0

Leer el W3C recommendation for Navigation Timing

Notable:

Por ejemplo, el siguiente script muestra un ingenuo intento de medir el tiempo que tarda en cargar completamente una página:

<html> 
<head> 
<script type="text/javascript"> 

var start = new Date().getTime(); 
function onLoad() { 
    var now = new Date().getTime(); 
    var latency = now - start; 
    alert("page loading time: " + latency); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html> 

La secuencia de comandos calcula el tiempo que lleva cargar la página a Después del se ejecuta el primer bit de JavaScript en el encabezado, pero no proporciona ninguna información sobre el tiempo que lleva obtener la página del servidor .

Para abordar la necesidad de información completa sobre la experiencia del usuario, este documento presenta las interfaces PerformanceTiming. Esta interfaz permite a los mecanismos de JavaScript proporcionar mediciones completas de latencia del lado del cliente dentro de las aplicaciones. Con la interfaz propuesta, el ejemplo anterior se puede modificar para medir la página percibida del usuario tiempo de carga.

La siguiente secuencia de comandos calcula cuánto tiempo cargar una página desde la navegación más reciente.

<html> 
<head> 
<script type="text/javascript"> 
function onLoad() { 
    var now = new Date().getTime(); 
    var page_load_time = now - performance.timing.navigationStart; 
    alert("User-perceived page loading time: " + page_load_time); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html> 
Cuestiones relacionadas