How to get page load duration using JavaScript-CodePudding

I am trying to get the time it takes to load a page and I am not sure of the correct way to run this script.

I thought I could do this:

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

However it always returns 0;

If I run it in the console after, it works fine. Is there another event I can use that runs after the window load event? What is the correct usage of this function?

CodePudding user response：

You can get load time using the performance API given by your browser

 let loadTime = window.performace.timing.loadEventEnd - window.performance.timing.navigationStart;

Checkout https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API for more

CodePudding user response：

You can also poll for the value being set:

const perf = () => {
  const duration = performance.getEntriesByType("navigation")[0].duration;
  if (!duration) setTimeout(perf, 0);
  else console.log({ duration });
}
window.addEventListener('DOMContentLoaded', perf);