Explanation of window.performance javascript

Question

I am working on detecting the connection speed, so i planned to go with window.performance object for duration calculation.

I am little confused with window.performance.timing object is generated based on the whole page load, or based on the last request and response.

For Example:

I am having 5 server call for web page load, performance.timing object is generated based on all the 5 server calls or based on the 5th server call(last call).

sample connection speed calculation for reference

 var bitsLoaded = 100000; //bits total size of all files (5 server call).  var duration = performance.timing.responseEnd - performance.timing.navigationStart;  var speedBps = Math.round(bitsLoaded / duration);  var speedKbps = (speedBps / 1024).toFixed(2);  var speedMbps = (speedKbps / 1024).toFixed(2);  

Anything not clear ready to explain

Any idea about window.performance

Answer 1

Not sure if this chart gives you a better understanding of performance.timing.

For your question:

I am having 5 server call for web page load, performance.timing object is generated based on all the 5 server calls or based on the 5th server call(last call).

The answer is: performance.timing is generated based on all requests and responses (but not including the ajax ones).

For the sample connection speed calculation script you gave, I guess the below one is better.

var duration = performance.timing.responseEnd - performance.timing.responseStart; 

The reason is: the duration from navigationStart to responseEnd includes DNS timing which does not transfer any data from server to client.

Please refer to https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/NavigationTiming/Overview.html for the definition of timings.

Answer 2

performance.timing is NOT based on the last request and response. It measures the delay between navigationStart stage and loadEventStart stage in a page life cycle. As explained here, it's main use is to determine the Page Load Speed.

In my opinion. performance.timing can't really be used for measuring connection speed since it's initiated After the user has received the response and is a javascript object, which runs on the browser. I suggest you simply ping the user and use the round trip time.