es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo obtener la duración de carga de página utilizando JavaScript

06 Jun, 2023 Programación

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);
});
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 objeto window, y luego utilizar el método performance.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étodo duration puede ser cero si la página ya se ha cargado completamente en el momento en que se dispara el evento load.

    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 evento load. 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:

    window.addEventListener("load", function() {
  setTimeout(function() {
    console.log(performance.getEntriesByType("navigation")[0].duration);
  }, 0);
});

    Este código agrega un event listener al evento load del objeto window, y luego utiliza el método setTimeout 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 de duration 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.

Comments are closed.