Javascript: How to get accurate Resource Timing API entry from browser

Question

Using the PerformanceResourceTiming, the duration value returned includes the resource scheduling time too.

Here is an example:

Here is the data observed using a Performance Observer:

The values match with the network panel. But this value corresponds to the total time. This total time has added up the resource scheduling time too.

Is there any way to get the duration from the API excluding the resource scheduling time? Usually the API is adding this time into the total duration of the request.

Here is the entry in the network panel table.

As you can see in the above photos : 244.13ms is the sum of 240ms (~Resource Inflight Time) + 4ms (~Resource Scheduling Time).

As noted above, the value logged is the sum of stalled time and time logged in the entry of network table. Which means it is not exclusively the in-flight time; I am looking for that.

Answer 1

you can calculate that time

 var startTime = performance.now()

 doSomething()   // <---- measured code goes between startTime and endTime

 var endTime = performance.now()

 console.log(`Call to doSomething took ${endTime - startTime} milliseconds`)

and if you want to know the time your request took before the server recieved it, start a "performance.now()" when you send the request and another "performance.now()" at the beginning of the function on the server.

then substract them as shown in the example above now you know the time it took for the server to recieve your request

Answer 2

This Code gives you total duration with and without latency, as you request excluding the resource scheduling time.

const resourcses =performance.getEntriesByType('resource').reduce((o,entry,i)=>{
    const {name,requestStart,responseStart,
    domainLookupEnd,
    domainLookupStart,
    connectEnd,
    connectStart,
    secureConnectionStart,
    responseEnd} = entry;
    const dnslookup = domainLookupEnd - domainLookupStart;
    const TCPhandshake = connectEnd - connectStart;
    const secureConn = (secureConnectionStart > 0) ? (connectEnd - secureConnectionStart) : 0;
    const wl = (responseEnd-requestStart)+(dnslookup+TCPhandshake+secureConn);
    const whl = (responseStart-requestStart)+(dnslookup+TCPhandshake+secureConn);
    const l = wl-whl;
    o[i] = {
        url:name,
        dnslookup,
        TCPhandshake,
        secureConn,
        withLatency:wl,
        withoutLatency:whl,
        networkLatency:l
    }
    return o;
})

console.dir(resourcses)

Above Image shows the response time without latency of 43.43 (green color) and with latency of 45.26 (sky blue color)

Latency is time required by network to fetch the resource from server to client, it may differ by your network speed.