Timing api中的ResponseEnd时间

Question

我正在尝试使用计时 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
响应开始：1538169000862
回复结束：1538169000862
domComplete : 1538169001831
加载事件开始：1538169001831 加载事件结束：0

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

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

navigationStart : 1538172249035 响应开始：1538172249035 回复结束：1538172249035 dom完成：0 加载事件开始：0 加载事件结束：0

据我所知，此导航位于框架内。

Answer 1

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

window.addEventListener('load', loaded)

...还不够，因为加载队列还没有完成
诀窍是将您的代码放回事件队列...

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

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

function nowYouCanDoIt() {
  console.log("loadEventEnd: " + performance.getEntriesByType("navigation")[0].loadEventEnd)
}