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

Question

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

javascripthtmlperformanceeventsnavigation-timing-api

4

我想要获取页面加载所需的时间，但是不确定该如何运行此脚本。

我认为可以这样做：

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

然而，它总是返回0；

如果我在控制台中运行它，则正常工作。是否有另一个事件可以在窗口加载事件之后运行？这个函数的正确用法是什么？

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

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

- Craig

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nizar Zizoune · Answer 1

您可以使用浏览器提供的性能 API 获取加载时间

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

查看https://developer.mozilla.org/zh-CN/docs/Web/API/Navigation_timing_API以获取更多信息

- Juergen Riemer · Answer 2

您还可以轮询设置的值：

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