termine - Tiempo de carga de la página con JavaScript
esperar que termine una funcion javascript (6)
Considero usar Firebug de Firefox:
..o las herramientas de desarrollo de Chrome (presione F12)
Ver también:
Estoy buscando una forma adecuada de probar el tiempo que tarda una página en cargar completamente todos sus recursos. Lo que he hecho hasta ahora es agregar:
window.startTime = (new Date).getTime(); // after the title in my page
Y
window.onload = function () {
console.log((new Date).getTime() - window.startTime);
}
window.addEventListener(''load'',function () {
console.log((new Date).getTime() - window.startTime);
},false);
Muy abajo en el pie de página. ¿Es esta una buena manera de medir? ¿Podría haber diferencias entre el tiempo de carga y el tiempo de carga percibido? Por lo que veo, los eventos se activan después de que todos los recursos se hayan cargado, incluidas las imágenes. ¿Hay alguna diferencia entre los dos eventos? ¿También puedo usar PageSpeed para probar esto? (Sé que puedo hacerlo en herramientas de desarrollo de Chrome, pero también quiero un script para poder realizar un seguimiento de los datos).
El enfoque de JavaScript depende mucho del navegador web. ¿Por qué no pruebas FireBug para Firefox, DevTools para Chrome y Firebug Lite para IE?
Si aún desea escribir algo de código, use window.performance object.
Probablemente obtendrá un tiempo de carga diferente para cada navegador.
En general, he usado una combinación de YSlow, PageSpeed y la pestaña Net en Firebug para medir los tiempos de carga de la página y diagnosticar problemas potenciales. Firebug tiene mucha información que puede resultar útil si aún no lo has comprobado.
Es prácticamente la única forma en los navegadores heredados para medir los tiempos. Pero para el rescate, la mayoría de los navegadores implementan el objeto window.performance que ofrece una manera muy precisa de obtener tiempos.
Una salida típica de window.performance.timing :
conectarEnd 1351036536696
connectStart 1351036536696
domComplete 1351036538277
domContentLoadedEventEnd 1351036538146
domContentLoadedEventStart 1351036538119
domInteractive 1351036538042
DomLoading 1351036537552
dominioLookupEnd 1351036536694
dominioLookupStart 1351036536694
fetchStart 1351036536696
loadEventEnd 1351036538295
loadEventStart 1351036538277
navegaciónStart 1351036536696
..que ni siquiera es la lista completa.
Escriba esto en la consola de su navegador:
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
loadTime;
Si solo está depurando el tiempo de carga de la página en su máquina local , Firefox Firebug, Chrome Developer Tools y IE F12 Developer Tools exponen los últimos tiempos de carga de la página.
Para obtener los tiempos de carga de la página de los visitantes a su sitio en el mundo real , querrá utilizar las métricas de carga de la página Real User Monitoring (aka RUM ). Yo recomendaría mirar en la especificación de tiempo de navegación . Esta especificación, caniuse.com/#feat=nav-timing con IE9 +, FF7 + y Chrome6 +, expone los tiempos de carga de la página (por ejemplo, DNS, conexión TCP, solicitud, respuesta y tiempos DOM) a través del DOM del navegador. Esto puede permitirle obtener tiempos de carga de página con una precisión de milisegundos para cada visitante que visita su sitio en un navegador moderno.
Expone todas estas métricas en la línea de tiempo:
Ahora que estas métricas están expuestas, hay varias formas de consumirlas.
Para una solución de bricolaje, Boomerang es una biblioteca de terceros que utiliza NavigationTiming en los navegadores modernos para enviar estos datos a su centro de datos. Para los navegadores más antiguos, tiene algunos trucos geniales que monitorean las navegaciones de página a página dentro de su sitio para determinar cuánto demora la carga de la página.
Si no está interesado en descubrir todas las cosas de Boomerang, hay otros proveedores de servicios que utilizan NavigationTiming (y similares) para informar datos de rendimiento de carga de la página, como Google Analytics , New Relic , Pingdom y Speedcurve .