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 ?
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 originTime 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.originTime.
>> 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)