Navigation timing
=================

Navigation Timing is part of the Performance API and provides metrics associated with navigating from one page to another. For example, you can determine how much time it takes to load or unload a document, or log the time it took until DOM construction has finished and interaction with the DOM is possible.

Only the current document is included, so usually there is only one `PerformanceNavigationTiming` object to observe. It extends the `PerformanceEntry` interface with the `entryType` of `"navigation"` and also inherits from `PerformanceResourceTiming`, so all of the timestamps from the process of fetching the document are available as well.

PerformanceEntry

PerformanceResourceTiming

PerformanceNavigationTimingNavigation timestamps
---------------------

![Timestamp diagram listing timestamps in the order in which they are recorded for the fetching of a document](/en-US/docs/Web/API/PerformanceNavigationTiming/timestamp-diagram.svg)
 Figure 1. Navigation timestamps (source).

The document navigation timestamps (in addition to those from Resource Timing) are:

1. `startTime`: Always 0.
2. `unloadEventStart`: (if there is a previous document) the timestamp immediately before the current document's `unload` event handler starts.
3. `unloadEventEnd`: (if there is a previous document) the timestamp immediately after the current document's `unload` event handler completes.
4. `domInteractive`: timestamp when DOM construction is finished and interaction with it from JavaScript is possible.
5. `domContentLoadedEventStart`: timestamp immediately before the current document's `DOMContentLoaded` event handler starts.
6. `domContentLoadedEventEnd`: timestamp immediately after the current document's `DOMContentLoaded` event handler completes.
7. `domComplete`: timestamp when the document and all sub-resources have finished loading.
8. `loadEventStart`: timestamp immediately before the current document's `load` event handler starts.
9. `loadEventEnd`: timestamp immediately after the current document's `load` event handler completes.
Other properties
----------------

The `PerformanceNavigationTiming` interface provides additional properties such as `redirectCount` returning the number of redirects and `type` indicating the type of navigation.

Example
-------

The `domContentLoadedEventEnd` and `domContentLoadedEventStart` timestamps can be used to measure how long it takes process the `DOMContentLoaded` event handler.

This example uses a `PerformanceObserver`, which notifies the caller about new `navigation` performance entries as they are recorded in the browser's performance timeline. The example uses the `buffered` option to access entries that were recorded before the observer was created.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const domContentLoadedTime =
      entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
    console.log(
      `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
    );
  });
});

observer.observe({ type: "navigation", buffered: true });
```


For more examples, see the property pages in the `PerformanceNavigationTiming` reference documentation.

See also
--------

* `PerformanceNavigationTiming`
* `PerformanceResourceTiming`