window.performance.timing deprecated

Question

I want to monitor the performance of my application.

For that I discovered window.performance.timing.

It works well but the function is deprecated.

So I replaced it with this.window.performance.getEntriesByType('navigation'); but I don't have the same result:

with window.performance.timing I receive :

connectEnd: 1658410230499,
connectStart: 1658410230499,
domComplete: 1658410232018,
domContentLoadedEventEnd: 1658410231130,
domContentLoadedEventStart: 1658410231129,
domInteractive: 1658410231019,
domLoading: 1658410230735,
domainLookupEnd: 1658410230499,
domainLookupStart: 1658410230499,
fetchStart: 1658410230499,
loadEventEnd: 1658410232047,
loadEventStart: 1658410232018,
navigationStart: 1658410230497,
redirectEnd: 0,
redirectStart: 0,
requestStart: 1658410230502,
responseEnd: 1658410230719,
responseStart: 1658410230712,
secureConnectionStart: 0,
unloadEventEnd: 1658410230732,
unloadEventStart: 1658410230732,

and with performance.getEntriesByType('navigation') I receive :

connectEnd: 1.5
connectStart: 1.5
decodedBodySize: 5725
domComplete: 1520.7000000029802
domContentLoadedEventEnd: 632.6000000014901
domContentLoadedEventStart: 631.9000000022352
domInteractive: 522.2000000029802
domainLookupEnd: 1.5
domainLookupStart: 1.5
duration: 1549.5
encodedBodySize: 2117
entryType: "navigation"
fetchStart: 1.5
initiatorType: "navigation"
loadEventEnd: 1549.5
loadEventStart: 1520.9000000022352
name: "https://my-url"
nextHopProtocol: "http/1.1"
redirectCount: 0
redirectEnd: 0
redirectStart: 0
requestStart: 5.300000000745058
responseEnd: 221.90000000223517
responseStart: 215.10000000149012
secureConnectionStart: 1.5
serverTiming: []
startTime: 0
transferSize: 2417
type: "navigate"
unloadEventEnd: 235
unloadEventStart: 234.80000000074506
workerStart: 0

I understand that for window.performance.timing it's a timestamp format but for performance.getEntriesByType('navigation') I do not understand the type of format.

Do you have an idea ?

Answer 1

window.performance.timing [MDN]
returns time values in milliseconds (probably long integer) since the UNIX epoch. its an absolute timestamp. If a returned value is zero (like redirectEnd), the event/point has not been triggered for this page. You can convert that value to a datetime value by passing it to the Date constructor.

>> window.performance.timing.connectStart
<< 1658497148266
>> new Date(window.performance.timing.connectStart)
<< Fri Jul 22 2022 15:13:23 GMT+0200 (Mitteleuropäische Sommerzeit)

window.performance.get [MDN]
returns most of the values as an instance of DOMHighResTimeStamp [MDN]. Those timestamps are relative to the timeOrigin of the window [MDN]. The origin time is a value in milliseconds since the unix epoch and you can get the origin time by window.performance.timeOrigin.

>> window.performance.timeOrigin
<< 1658497148262.4
>> window.performance.getEntriesByType('navigation')[0].connectStart
<< 4.300000011920929
>> new Date(window.performance.timeOrigin +  
            window.performance.getEntriesByType('navigation')[0].connectStart)
<< Fri Jul 22 2022 15:13:23 GMT+0200 (Mitteleuropäische Sommerzeit)