如何使用 JavaScript 获取页面加载持续时间

Question

我正在尝试获取加载页面所需的时间，但我不确定运行此脚本的正确方法。

我以为我可以做到：

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

然而它总是returns 0;

如果我运行它在控制台之后，它工作正常。在 window 加载事件之后，我可以使用另一个事件运行s 吗？这个函数的正确用法是什么？

编辑：似乎使用 setTimeout 将其添加为页面完全加载后运行s 的第一件事。工作代码是：

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

Answer 1

您可以使用浏览器

给出的性能API来获取加载时间

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

查看 https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API 了解更多

Answer 2

您还可以轮询正在设置的值：

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

如何使用 JavaScript 获取页面加载持续时间

How to get page load duration using JavaScript

html

javascript

performance

events

navigation-timing-api