This article currently describes Navigation Timing Level 1. There is a specification for Level 2, but it is not yet covered here.
Concepts and usage
You can use the Navigation Timing API to gather performance data on the client side which you can then transmit to a server using
XMLHttpRequest or other techniques. Also, the API lets you measure data that was previously difficult to obtain, such as the amount of time needed to unload the previous page, how long domain lookups take, the total time spent executing the window's
load handler, and so forth.
window.performanceproperty returns a
Performanceobject. While this interface is defined by the High Resolution Time API, the Navigation Timing API adds two properties:
navigation, of the types below.
- Used as the type for the value of
timing, objects of this type contain timing information that can provide insight into web page performance.
- The type used to return the value of
navigation, which contains information explaining the context of the load operation described by this
- Provides methods and properties to store and retrieve metrics regarding the browser's document navigation events. For example, this interface can be used to determine how much time it takes to load or unload a document.
The Navigation Timing API can be used to gather performance data on the client side to be sent to a server via XHR as well as measure data that was very difficult to measure by other means such as time to unload a previous page, domain look up time, window.onload total time, etc.
Calculate the total page load time
To compute the total amount of time it took to load the page, you can use the following code:
var perfData = window.performance.timing; var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
Calculate request response time
You can calculate the time elapsed between the beginning of a request and the completion of getting the response using code like this:
var connectTime = perfData.responseEnd - perfData.requestStart;
Calculate page render time
As another example of an interesting piece of data you can obtain using the Navigation Timing API that you can't otherwise easily get, you can get the amount of time it took to render the page:
var renderTime = perfData.domComplete - perfData.domLoading;
|Navigation Timing Level 2||Editor's Draft||Adds
|Navigation Timing||Recommendation||Initial definition.|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||6.0||(Yes)||7 (7)||9||15.0||8|
|Feature||Android||Edge||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||4.0||(Yes)||15 (15)||9||15.0||8|