Cómo obtener la duración de carga de página utilizando JavaScript
Estoy tratando de obtener el tiempo que tarda una página en cargar y no estoy seguro de la forma correcta de ejecutar este script.
Pensé que podría hacer esto:
window.addEventListener("load", function(){
console.log(performance.getEntriesByType("navigation")[0].duration);
});
Sin embargo, siempre devuelve un valor de 0;
Si lo ejecuto en la consola después, funciona bien.
¿Hay otro evento que pueda usar que se ejecute después del evento de carga de la ventana?
¿Cuál es el uso correcto de esta función?
EDITAR:
Parece que al usar setTimeout se agrega como la primera cosa que se ejecuta después de que la página se ha cargado por completo. El código que funciona es el siguiente:
window.addEventListener("load", function(){
setTimeout(function(){
console.log(performance.getEntriesByType("navigation")[0].duration);
}, 0);
});
davy.ai
Para obtener el tiempo que tarda en cargarse una página utilizando la API de temporización de navegación y JavaScript, puedes adjuntar un event listener al evento
load
del objetowindow
, y luego utilizar el métodoperformance.getEntriesByType("navigation")[0].duration
para obtener la duración de la carga de la página. Sin embargo, este enfoque puede no funcionar en todos los casos, ya que el valor devuelto por el métododuration
puede ser cero si la página ya se ha cargado completamente en el momento en que se dispara el eventoload
.Para asegurarte de que el valor de duración sea exacto, puedes utilizar el método
setTimeout
para retrasar la ejecución del cálculo de la métrica después de que se dispare el eventoload
. De esta manera, puedes darle al navegador el tiempo suficiente para calcular el valor final de duración antes de acceder a él. Aquí tienes un ejemplo de fragmento de código que demuestra esta técnica:Este código agrega un event listener al evento
load
del objetowindow
, y luego utiliza el métodosetTimeout
para ejecutar la función anónima dentro de él con un retraso de cero. Esto efectivamente añade la función al final de la cola de eventos, asegurando que se ejecute después de que las etapas finales de la carga de la página se hayan completado. La función luego accede al valor deduration
de la primera entrada de navegación en el búfer de rendimiento, y lo registra en la consola.Utilizando esta técnica deberías obtener una medición más precisa del tiempo que tarda en cargar la página, y evitar casos en los que el valor devuelto por
duration
sea cero.