0

我正在尝试使用计时 API 测量页面加载性能。首先，我将下面的代码包含在我的 html 文档的正文中，以检查我是否正确获取了所有属性。

<script>
    window.addEventListener('load', () => {
       console.log("navigationStart : "+  (performance.timing.navigationStart));
       console.log("responseStart : "+ (performance.timing.responseStart));
       console.log("responseEnd : "+ (performance.timing.responseEnd));
       console.log("domComplete : "+ (performance.timing.domComplete));
       console.log("loadEventStart : "+ (performance.timing.loadEventStart));
       console.log("LoadEventEnd : "+ (performance.timing.loadEventEnd));
     });

输出如下

导航开始：1538169000862
responseStart：1538169000862
responseEnd：1538169000862
domComplete：1538169001831
loadEventStart：1538169001831 LoadEventEnd：0

我想知道为什么 LoadEventEnd 为零？是因为页面还在加载吗？那么捕捉这些指标的最佳时间是什么时候？

编辑：--引入超时后，我能够捕获 LoadEvendEnd 时间。但是，当我转到下一页时，许多属性现在为零。

导航开始：1538172249035 responseStart：1538172249035 responseEnd：1538172249035 domComplete：0 loadEventStart：0 LoadEventEnd：0

据我了解，此导航位于框架内。

4

1 回答 1

1

是 - LoadEventEnd 为零，因为页面仍在加载。
您需要在页面加载后执行代码...

window.addEventListener('load', loaded)

... 还不够，因为加载队列尚未完成
诀窍是将代码放回事件队列...

function loaded() {
  setTimeout(nowYouCanDoIt, 0)
}

...并检查 loadEventEnd 不再为零：

function nowYouCanDoIt() {
  console.log("loadEventEnd: " + performance.getEntriesByType("navigation")[0].loadEventEnd)
}
于 2019-05-16T17:09:50.657 回答