ResponseEnd Time in Timing api

Question

I am trying to measure page load performance using timing API. To start with I included below piece of code into body of my html document to check if I am getting all attributes correctly.

<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));
     });        

Output is below

navigationStart : 1538169000862
responseStart : 1538169000862
responseEnd : 1538169000862
domComplete : 1538169001831
loadEventStart : 1538169001831 LoadEventEnd : 0

I am wondering why LoadEventEnd is zero? Is it because page is still loading? what would be the best time to capture these metrics then?

Edit :-- After introducing timeout, I was able to capture LoadEvendEnd time. However when I move to next pages many of the attributes are zero now.

navigationStart : 1538172249035 responseStart : 1538172249035 responseEnd : 1538172249035 domComplete : 0 loadEventStart : 0 LoadEventEnd : 0

This navigation is inside a frame as i understand.

Answer 1

Yes - LoadEventEnd is zero because page is still loading.
You need to do the code after the page has loaded ...

window.addEventListener('load', loaded)

... is not enough because the load queue has not finished
The trick is to put your code back on the event queue ...

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

... and check that loadEventEnd is not zero anymore:

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