This page demonstrates the use of HTML5 Navigation timing and Resource Timing APIs. The JavaScript in this page is optimized for Internet Explorer. Although both the Navigation and Resource Timing APIs are implemented cleanly in most browsers, using JavaScript to format and display the data on the page brings us to some cross-browser issues. The most typical use of these timings would be to send them to a data warehouse. In such a situation, a receiving service would process the data. Here, however, many JavaScript functions are used to format and timings on the web page. Being able to visualize the timing in this way is also useful, particularly during development of a web page.
These API's provide a free way to measure the response times. I have notice that having this script on the Web is a useful latency check. Also illustrated in the code are techniques to stringify the timing data so that it can be sent to a database and archived. Note that the bottom of this page has 8 resources of different sizes. The Google Map counts as 2 resources, one resource is the map iFrame, itself, then the map image is a second resource..
So far, this demo sends only the raw navigation data to a data warehouse for collection (I do not have a public SQL Server or web server set up to receive this data, but did originally on my local Intranet). The same stringify techniques could be used to send the resource metrics. In actual production use, you would probably send only the raw timings (shown at the bottom of this page), and calculate them only when pulling them out of the warehouse.The delay you see in loading is the time it is taking to load very large high resolution images into the bottom of this page.
Currently, the navigation timing works on all browsers, but the Chrome always pulls the resources out of it's cache (guess that's one reason Chrome seems faster than IE.)
The following are response times for various resources put on to this page: there is a google map and several hi-res images. The values are in milliseconds. The first field is the timing of the resource in milliseconds. The second field, "name", contains the entire URL of the resource. To do: Order this display by resources with longest response time.
Sending the raw data to the server is actually easier than using JavaScript to display timings on a web page. Here is a key method which subtracts the raw navigation timings from one another:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
///<summary> /// Subtracts the navigation timings from one another and adds them into an array. /// An alt version of this here: https://gist.github.com/codenothing/872023 /// To do: is there a way to calculate navigation timings from a previously collected object instead of re-collecting here? /// The var_timings_nav parameter we pass in is not actually being used . . . ///</summary> ///<param name="y"></param> ///<param name="y"></param> ///<returns>An array of time values. </returns> function CalculateNavigationTimings(var_timings_nav) { varCalculdatedNavTimings = 'redirTime: ' + (performance.timing.redirectEnd - performance.timing.redirectStart) + ', '; varCalculdatedNavTimings += 'cacheTime: ' + (performance.timing.domainLookupStart - performance.timing.fetchStart) + ', '; varCalculdatedNavTimings += 'dnsTime: ' + (performance.timing.domainLookupEnd - performance.timing.domainLookupStart) + ', '; varCalculdatedNavTimings += 'tcpTime: ' + (performance.timing.connectEnd - performance.timing.connectStart) + ', '; varCalculdatedNavTimings += 'request: ' + (performance.timing.responseStart - performance.timing.requestStart) + ', '; varCalculdatedNavTimings += 'response: ' + (performance.timing.responseEnd - performance.timing.connectStart) + ', '; // the following two may show zero if the script is executed from the onload event and page is not finished loading varCalculdatedNavTimings += 'Render Time via perf object: ' + (performance.timing.domComplete - performance.timing.domLoading) + ', '; varCalculdatedNavTimings += 'Render Time via Date.now() (perceived render time): ' + (Date.now() - performance.timing.domLoading) + ', '; varCalculdatedNavTimings += 'Load Time via perf object (may be zero): ' + (performance.timing.loadEventEnd - performance.timing.navigationStart) + ', '; varCalculdatedNavTimings += 'Load Time via Date.now (perceived load time): ' + (Date.now() - performance.timing.navigationStart) + ', '; return (varCalculdatedNavTimings); } |
Much of the complicated JavaScript in this page his to do with displaying the values on the page correctly. Sending the data to a datawarehouse is easier. But the displays are useful so you have a real-time look at the timings.
The following images have been added for testing purposes so that we have some resources to time.
Here is the timing as it is output from the Navigation API directly. As you can see, this is a little messy in terms of significant figures. We just get ticks here. These ticks must be subtracted from one another in order to obtain measured response times. See above "Caclulated Page Navigation Timings" in order to see how to get the measured response times.
This is the above data but massaged in two ways: 1) the timings have been subtracted from the navigation start event. 2) the timings have been rounded to 3 decimal places; 3) the timings have been placed into a stringified format so they can be sent to a data warehouse.
Here is the raw resource timing.
To do list: There are other timings that HTML 5 is capable of gathering and displaying. Some of these are browser dependent. They can be broken out by type of resource