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

Calvin Zhang · Accepted Answer · 2013-05-29 09:07:46Z

63

performance.timing

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.

answered May 29, 2013 at 9:07

Calvin Zhang

9568 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NicJ Over a year ago

Note that performance.timing.responseEnd - performance.timing.responseStart; will only measure the time that the root document (eg, HTML) took to be sent from the server, not the 5 server calls and 100000 bits that karthick mentioned.

DarrenVortex · Accepted Answer · 2013-06-09 23:22:56Z

1

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.

answered Jun 9, 2013 at 23:22

DarrenVortex

1951 gold badge2 silver badges15 bronze badges

1 Comment

Kevin Patrick Tan Over a year ago

Hi, I am still bit confused on how it really works but I do get the general facts. For opening I used "navigationStart and loadEventStart", which would be correct right?. Now I have a question as this performance class happens when the page is being loaded or the url is being accessed (Based on my understanding?).. then how can I get the speed of closing a web page? Is it another class?

Collectives™ on Stack Overflow

Explanation of window.performance javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related