Using XMLHttpRequest to Measure Round Trip Time

This example illustrates the use of XMLHttpRequest as a method to conduct basic performance monitoring. While doing so you will be introduced to the basics in sending XMLHttpRequests and how to setup event handlers for managing on-going requests.

It should be noted that although the example contains a method to measure round trip time (RTT) one should be clear about what is actually measured. The measurement request messages are created in Javascript, which is executed by the Javascript engine in the web browser, which in turn is running on top of an operating system. Likewise, the request is processed and a response generated by the PHP process running on the web server that in turn runs on an operating system. The diagram below shows the delay measured between the Javascript application and the PHP script on the server.


As the diagram above illustrates, there is a processing delay from the point when the message is created by Javascript and sent over the network interface. The processing delay is impacted by things such as processor load, whether there is a need to perform a DNS look-up of the destination URI, whether the browser is running a sandbox environment, antivirus programs, etc. Likewise, the timestamp generated by the PHP script on the server side also includes processing delay.

Two-Way Delay

The measurement uses four different timestamps. The first is t0, which is a timestamp generated by the requester right before the request message is sent by the Javascript program. The second timestamp, t1, is generated on the server, the responder, when the PHP script is executed and indicates when the request was received by the responder. Timestamp t2 is created right before the response is transmitted to the requestor and t3 is the timestamp generated when the response was received by script in the Javascript engine.

If the clocks of the requester and responder are synchronised, then it would be possible to determine the one-way delay by simply subtracting t1 from t0 to get the delay of the request and t3 from t2 to get the delay of the response. But it cannot be assumed that the time on the requester and the responder are synchronised. The RTT is calculated by t3 minus t0, but you can also remove the time spent on the server by subtracting t2 minus t1.

RTT = (t3 – t0) – (t2 – t1)

Now that you have some background to the theory, this is how you realise it with some Javascript and PHP code.

The function that actually generates the XMLHttpRequest message is as follows:

Some comments to this function:

  • It takes two input parameters: the URI of the responder (this PHP script that will process the request and generate a response) and the method used to send the request. The method can either be GET or POST.
  • Lines 14-17 create a set of event listeners to handle load, error, abort and timeout events.
  • A timeout is set to manage long response times, e.g. if you are not interested in messages that arrive after 500 ms, then you can set the timeout to that value. Note, not all browsers seem to support the timeout event. At least Firefox and Chrome support it.
  • The following clauses handle the different methods, GET and POST. The GET method sends the request data in the URI, whereas the POST method creates a FormData object to store the t0 timestamp and message id.

The responder script on the server handling the requests looks like this:

This script is fairly simple and it’s primary purpose is to create the t1 and t2 timestamps. The function microtime() needs to be used to get millisecond accuracy. As you can see, the response is uses the JSON format.

When the requester received the response the load event will be triggered call the function transferComplete. The basic idea is to create t3 timestamp, parse the JSON data in the response, calculate the time spent on the server, then calculate the RTT. In this example, the result is stored in a global variable.

You may want to do some input validation of the parsed JSON data and handle the result as suites your needs.

This example has three files:

  1. HTML file to initiate request messages.
  2. Javscript file to create messages and handle responses
  3. PHP file to handle request messages and send a response.

Download the full source code here:

perfmon (429 downloads)