This specification defines an interface for web applications to access the complete timing information for navigation of a document.

Navigation Timing 2 replaces the first version of [[NAVIGATION-TIMING]] and includes the following changes:

Introduction

Accurately measuring performance characteristics of web applications is an important aspect of making web applications faster. While JavaScript-based mechanisms, such as the one described in [[JSMEASURE]], can provide comprehensive instrumentation for user latency measurements within an application, in many cases, they are unable to provide a complete or detailed end-to-end latency picture. For example, the following JavaScript shows a naive attempt to measure the time it takes to fully load a page: 

        <html>
        <head>
        <script type="text/javascript">
        var start = new Date().getTime();
        function onLoad() {
          var now = new Date().getTime();
          var latency = now - start;
          alert("page loading time: " + latency);
        }
        </script>
        </head>
        <body onload="onLoad()">
        <!- Main page body goes from here. -->
        </body>
        </html>

The above script calculates the time it takes to load the page after the first bit of JavaScript in the head is executed, but it does not give any information about the time it takes to get the page from the server, or the initialization lifecycle of the page.

This specification defines the PerformanceNavigationTiming interface which participates in the [[PERFORMANCE-TIMELINE-2]] to store and retrieve high resolution performance metric data related to the navigation of a document. As the PerformanceNavigationTiming interface uses [[HR-TIME-2]], all time values are measured with respect to the time origin of the Window object.

For example, if we know that the response end occurs 100ms after the start of navigation, the PerformanceNavigationTiming data could look like so: 

      startTime:           0.000  // start time of the navigation request
      responseEnd:       100.000  // high resolution time of last received byte

The following script shows how a developer can use the PerformanceNavigationTiming interface to obtain accurate timing data related to the navigation of the document: 

        <script>
        function showNavigationDetails() {
          // Get the first entry
          const [entry] = performance.getEntriesByType("navigation");
          // Show it in a nice table in the developer console
          console.table(entry.toJSON());
        </script>
        <body onload="showNavigationDetails()">

Terminology

The construction "a Foo object", where Foo is actually an interface, is sometimes used instead of the more accurate "an object implementing the interface Foo.

The term navigation refers to the act of navigating.

The term current document refers to the document associated with the Window object's newest Document object.

The term JavaScript is used to refer to ECMA262, rather than the official term ECMAScript, since the term JavaScript is more widely known. [[ECMASCRIPT]]

Throughout this work, all time values are measured in milliseconds since the start of navigation of the document. For example, the start of navigation of the document occurs at time 0. The term current time refers to the number of milliseconds since the start of navigation of the document until the current moment in time. This definition of time is based on [[HR-TIME-2]] specification.

Navigation Timing

Relation to the PerformanceEntry interface

PerformanceNavigationTiming interface extends the following attributes of PerformanceEntry interface:

Relation to the PerformanceResourceTiming interface

PerformanceNavigationTiming interface extends the following attributes of the PerformanceResourceTiming interface:

Only the current document resource is included in the performance timeline; there is only one PerformanceNavigationTiming object in the performance timeline.

The PerformanceNavigationTiming interface

Checking and retrieving contents from the HTTP cache [[RFC7234]] is part of the fetching process. It's covered by the requestStart, responseStart and responseEnd attributes. 

        [Exposed=Window]
        interface PerformanceNavigationTiming : PerformanceResourceTiming {
            readonly        attribute DOMHighResTimeStamp unloadEventStart;
            readonly        attribute DOMHighResTimeStamp unloadEventEnd;
            readonly        attribute DOMHighResTimeStamp domInteractive;
            readonly        attribute DOMHighResTimeStamp domContentLoadedEventStart;
            readonly        attribute DOMHighResTimeStamp domContentLoadedEventEnd;
            readonly        attribute DOMHighResTimeStamp domComplete;
            readonly        attribute DOMHighResTimeStamp loadEventStart;
            readonly        attribute DOMHighResTimeStamp loadEventEnd;
            readonly        attribute NavigationType      type;
            readonly        attribute unsigned short      redirectCount;
            [Default] object toJSON();
        };

If the previous document, and any HTTP redirects or equivalent when navigating, pass the timing allow check algorithm, the unloadEventStart attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately before the user agent starts the unload event of the previous document.

If there is no previous document or the above timing allow check algorithm does not pass, this attribute MUST return a DOMHighResTimeStamp with a time value equal to zero.

If the previous document, and any HTTP redirects or equivalent when navigating, pass the timing allow check algorithm, the unloadEventEnd attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately after the user agent finishes the unload event of the previous document.

If there is no previous document or the above timing allow check algorithm does not pass, this attribute MUST return a DOMHighResTimeStamp with a time value equal to zero.

The domInteractive attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately before the user agent sets the current document readiness of the current document to "interactive" [[!HTML]].

The domContentLoadedEventStart attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately before the user agent fires the DOMContentLoaded event at the current document.

The domContentLoadedEventEnd attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately after the current document's DOMContentLoaded event completes.

The domComplete attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately before the user agent sets the current document readiness of the current document to "complete" [[!HTML]].

If the current document readiness changes to the same state multiple times, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd and domComplete MUST return a DOMHighResTimeStamp with a time value equal to the time of the first occurrence of the corresponding document readiness change [[!HTML]].

The loadEventStart attribute MUST return a DOMHighResTimeStamp with a time value equal to the time immediately before the load event of the current document is fired. It MUST return a DOMHighResTimeStamp with a time value equal to zero when the load event is not fired yet.

The loadEventEnd attribute MUST return a DOMHighResTimeStamp with a time value equal to the time when the load event of the current document is completed. It MUST return a DOMHighResTimeStamp with a time value equal to zero when the load event is not fired or is not completed.

The type attribute MUST return a DOMString describing the type of the last non-redirect navigation in the current browsing context. It MUST have one of the NavigationType values.

Client-side redirects, such as those using the Refresh pragma directive, are not considered HTTP redirects or equivalent by this spec. In those cases, the type attribute SHOULD return appropriate value, such as reload if reloading the current page, or navigate if navigating to a new URL.

The redirectCount attribute MUST return the number of redirects since the last non-redirect navigation under the current browsing context. If there is no redirect or there is any redirect that does not pass the timing allow check algorithm, this attribute MUST return zero.

The toJSON() method runs [WEBIDL]'s default toJSON operation.

NavigationType enum 

            enum NavigationType {
                "navigate",
                "reload",
                "back_forward",
                "prerender"
            };

The values are defined as follows:

navigate
Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the ones used by reload and back_forward as listed below.
reload
Navigation through the reload operation or the location.reload() method.
back_forward
Navigation through a history traversal operation.
prerender
Navigation initiated by a prerender hint [[!RESOURCE-HINTS]].

The format of the above enumeration value is inconsistent with the WebIDL recommendation for formatting of enumeration values. Unfortunately, we are unable to change it due to backwards compatibility issues with shipped implementations.

Process

Processing Model

This figure illustrates the timing attributes defined by the PerformanceNavigationTiming interface. Attributes in parenthesis indicate that they may not be available for navigations involving documents from different origins.
Navigation Timing attributes
  1. If the navigation is aborted for any of the following reasons, abort these steps.
    1. The navigation is aborted due to the sandboxed navigation browsing context flag, the sandboxed top-level navigation without user activation browsing context flag or the sandboxed top-level navigation with user activation browsing context flag, a preexisting attempt to navigate the browsing context, or the user canceling the navigation.
    2. The navigation is caused by fragment identifiers within the page.
    3. The new resource is to be handled by some sort of inline content.
    4. The new resource is to be handled using a mechanism that does not affect the browsing context.
    5. The user refuses to allow the document to be unloaded.
  2. Create a new PerformanceNavigationTiming object and add it to the performance entry buffer.
  3. Set name to the DOMString "document".
  4. Set entryType and initiatorType to the DOMString "navigation".
  5. Set startTime to a DOMHighResTimeStamp with a time value of zero, and nextHopProtocol to the empty DOMString.
  6. Record the current navigation type in type if it has not been set:
    1. If the navigation was started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the location.reload() method, let the navigation type be the DOMString "navigate".
    2. If the navigation was started either as a result of a meta refresh, or the location.reload() method, or other equivalent actions, let the navigation type be the DOMString "reload".
    3. If the navigation was started as a result of history traversal, let the navigation type be the DOMString "back_forward".
  7. If the previous document does not pass the timing allow check algorithm, set both unloadEventStart and unloadEventEnd to 0 then go to fetch-start-step. Otherwise, record unloadEventStart as the time immediately before the unload event.
  8. Immediately after the unload event is completed, record the current time as unloadEventEnd. If the navigation URL has an active worker registration, immediately before the user agent runs the worker record the time as workerStart, or if the worker is available, record the time before the event named `fetch` is fired at the active worker. Otherwise, if the navigation URL has no matching service worker registration, set workerStart value to zero.
  9. [fetch-start-step] If the new resource is to be fetched using HTTP GET or equivalent, immediately before a user agent checks with the relevant application caches, record the current time as fetchStart. Otherwise, immediately before a user agent starts the fetching process, record the current time as fetchStart.
  10. Let domainLookupStart, domainLookupEnd, connectStart and connectEnd be the same value as fetchStart.
  11. Set name to a DOMString value of the address of the current document.
  12. If the resource is fetched from the relevant application cache or local resources, including the HTTP cache [[RFC7234]], go to request-start-step.
  13. If no domain lookup is required, go to connect-start-step. Otherwise, immediately before a user agent starts the domain name lookup, record the time as domainLookupStart.
  14. Record the time as domainLookupEnd immediately after the domain name lookup is successfully done. A user agent MAY need multiple retries before that. If the domain lookup fails, abort the rest of the steps.
  15. [connect-start-step] If a persistent transport connection is used to fetch the resource, let connectStart and connectEnd be the same value of domainLookupEnd. Otherwise, record the time as connectStart immediately before initiating the connection to the server and record the time as connectEnd immediately after the connection to the server or the proxy is established. A user agent MAY need multiple retries before this time. Once connection is established set the value of nextHopProtocol to the ALPN ID used by the connection. If a connection can not be established, abort the rest of the steps.
  16. A user agent MUST also set the secureConnectionStart attribute as follows:
    1. When a secure transport is used, the user agent MUST record the time as secureConnectionStart immediately before the handshake process to secure the connection.
    2. When a secure transport is not used, the user agent MUST set the value of secureConnectionStart to 0.
  17. [request-start-step] Immediately before a user agent starts sending request for the document, record the current time as requestStart.
  18. Record the time as responseStart immediately after the user agent receives the first byte of the response.
  19. Record the time as responseEnd immediately after receiving the last byte of the response.
    1. Return to connect-start-step if the user agent fails to send the request or receive the entire response, and needs to reopen the connection.

      When persistent connection [[!RFC7230]] is enabled, a user agent MAY first try to re-use an open connect to send the request while the connection can be asynchronously closed. In such case, connectStart, connectEnd and requestStart SHOULD represent timing information collected over the re-open connection.

    2. Set the value of transferSize, encodedBodySize, decodedBodySize to corresponding values.
  20. If the fetched resource results in an HTTP redirect or equivalent, then
    1. If the timing allow check algorithm does not pass for the origin of the fetched resource, set redirectStart, redirectEnd, unloadEventStart, unloadEventEnd and redirectCount to 0. Then, return to fetch-start-step with the new resource.
    2. Increment redirectCount by 1.
    3. If the value of redirectStart is 0, let it be the value of fetchStart.
    4. Let redirectEnd be the value of responseEnd.
    5. Set all of the attributes in the PerformanceNavigationTiming object to 0 except startTime, redirectStart, redirectEnd, redirectCount, type, nextHopProtocol, unloadEventStart and unloadEventEnd. Set nextHopProtocol to the empty DOMString.
    6. Return to fetch-start-step with the new resource.
  21. Record the time as domInteractive immediately before the user agent sets the current document readiness to "interactive".
  22. Record the time as domContentLoadedEventStart immediately before the user agent fires the DOMContentLoaded event at the document.
  23. Record the time as domContentLoadedEventEnd immediately after the DOMContentLoaded event completes.
  24. Record the time as domComplete immediately before the user agent sets the current document readiness to "complete".
  25. Record the time as loadEventStart immediately before the user agent fires the load event.
  26. Record the time as loadEventEnd immediately after the user agent completes the load event.
  27. Set the duration to a DOMHighResTimeStamp equal to the difference between loadEventEnd and startTime, respectively.
  28. Queue the new PerformanceNavigationTiming object.

Some user agents maintain the DOM structure of the document in memory during navigation operations such as forward and backward. In those cases, the PerformanceNavigationTiming object MUST NOT be altered during the navigation.

Privacy

Information disclosure

There is the potential for disclosing an end-user's browsing and activity history by using carefully crafted timing attacks. For instance, the unloading time reveals how long the previous page takes to execute its unload handler, which could be used to infer the user's login status. These attacks have been mitigated by enforcing the timing allow check algorithm when timing information involving the previous navigation is accessed. [[RESOURCE-TIMING-2]]

The relaxed same origin policy doesn't provide sufficient protection against unauthorized visits across documents. In shared hosting, an untrusted third party is able to host an HTTP server at the same IP address but on a different port.

Cross-directory access

Different pages sharing one host name, for example contents from different authors hosted on sites with user generated content are considered from the same origin because there is no feature to restrict the access by pathname. Navigating between these pages allows a latter page to access timing information of the previous one, such as timing regarding redirection and unload event.

Security

The PerformanceNavigationTiming interface exposes timing information for the current document to any resource loaded by the document, such as a web page or a worker. To limit the access to the PerformanceNavigationTiming interface, the timing allow check algorithm is enforced and certain attributes are set to zero, as described in 4.5 Cross-origin Resources [[!RESOURCE-TIMING]]. Resource providers can explicitly allow all timing information to be collected for a current document by adding the Timing-Allow-Origin HTTP response header, which specifies the domains that are allowed to access the timing information.

Detecting proxy servers

In case a proxy is deployed between the user agent and the web server, the time interval between the connectStart and the connectEnd attributes indicates the delay between the user agent and the proxy instead of the web server. With that, web server can potentially infer the existence of the proxy. For SOCKS proxy, this time interval includes the proxy authentication time and time the proxy takes to connect to the web server, which obfuscate the proxy detection. In case of an HTTP proxy, the user agent might not have any knowledge about the proxy server at all so it's not always feasible to mitigate this attack.

Obsolete

This section defines attributes and interfaces previously introduced in [[NAVIGATION-TIMING]] Level 1 and are kept here for backwards compatibility. Authors should not use the following interfaces and are strongly advised to use the new PerformanceNavigationTiming interface—see summary of changes and improvements.

The PerformanceTiming interface 

[Exposed=Window]
interface PerformanceTiming {
  readonly attribute unsigned long long navigationStart;
  readonly attribute unsigned long long unloadEventStart;
  readonly attribute unsigned long long unloadEventEnd;
  readonly attribute unsigned long long redirectStart;
  readonly attribute unsigned long long redirectEnd;
  readonly attribute unsigned long long fetchStart;
  readonly attribute unsigned long long domainLookupStart;
  readonly attribute unsigned long long domainLookupEnd;
  readonly attribute unsigned long long connectStart;
  readonly attribute unsigned long long connectEnd;
  readonly attribute unsigned long long secureConnectionStart;
  readonly attribute unsigned long long requestStart;
  readonly attribute unsigned long long responseStart;
  readonly attribute unsigned long long responseEnd;
  readonly attribute unsigned long long domLoading;
  readonly attribute unsigned long long domInteractive;
  readonly attribute unsigned long long domContentLoadedEventStart;
  readonly attribute unsigned long long domContentLoadedEventEnd;
  readonly attribute unsigned long long domComplete;
  readonly attribute unsigned long long loadEventStart;
  readonly attribute unsigned long long loadEventEnd;
  [Default] object toJSON();
};

All time values defined in this section are measured in milliseconds since midnight of .

navigationStart

This attribute must return the time immediately after the user agent finishes prompting to unload the previous document. If there is no previous document, this attribute must return the time the current document is created.

This attribute is not defined for PerformanceNavigationTiming. Instead, authors can use timeOrigin to obtain equivalent timestamp.

unloadEventStart

If the previous document and the current document have the same origin [[!RFC6454]], this attribute must return the time immediately before the user agent starts the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document, this attribute must return zero.

unloadEventEnd

If the previous document and the current document have the same same origin, this attribute must return the time immediately after the user agent finishes the unload event of the previous document. If there is no previous document or the previous document has a different origin than the current document or the unload is not yet completed, this attribute must return zero.

If there are HTTP redirects or equivalent when navigating and not all the redirects or equivalent are from the same origin, both unloadEventStart and unloadEventEnd must return the zero.

redirectStart

If there are HTTP redirects or equivalent when navigating and if all the redirects or equivalent are from the same origin, this attribute must return the starting time of the fetch that initiates the redirect. Otherwise, this attribute must return zero.

redirectEnd

If there are HTTP redirects or equivalent when navigating and all redirects and equivalents are from the same origin, this attribute must return the time immediately after receiving the last byte of the response of the last redirect. Otherwise, this attribute must return zero.

fetchStart

If the new resource is to be fetched using HTTP GET or equivalent, fetchStart must return the time immediately before the user agent starts checking any relevant application caches. Otherwise, it must return the time when the user agent starts fetching the resource.

domainLookupStart

This attribute must return the time immediately before the user agent starts the domain name lookup for the current document. If a persistent connection [[!RFC2616]] is used or the current document is retrieved from relevant application caches or local resources, this attribute must return the same value as fetchStart.

domainLookupEnd

This attribute must return the time immediately after the user agent finishes the domain name lookup for the current document. If a persistent connection [[!RFC2616]] is used or the current document is retrieved from relevant application caches or local resources, this attribute must return the same value as fetchStart.

Checking and retrieving contents from the HTTP cache [[!RFC2616]] is part of the fetching process. It's covered by the requestStart, responseStart and responseEnd attributes.

In case where the user agent already has the domain information in cache, domainLookupStart and domainLookupEnd represent the times when the user agent starts and ends the domain data retrieval from the cache.

connectStart

This attribute must return the time immediately before the user agent start establishing the connection to the server to retrieve the document. If a persistent connection [[!RFC2616]] is used or the current document is retrieved from relevant application caches or local resources, this attribute must return value of domainLookupEnd.

connectEnd

This attribute must return the time immediately after the user agent finishes establishing the connection to the server to retrieve the current document. If a persistent connection [[!RFC2616]] is used or the current document is retrieved from relevant application caches or local resources, this attribute must return the value of domainLookupEnd

If the transport connection fails and the user agent reopens a connection, connectStart and connectEnd should return the corresponding values of the new connection.

connectEnd must include the time interval to establish the transport connection as well as other time interval such as SSL handshake and SOCKS authentication.

secureConnectionStart

This attribute is optional. User agents that don't have this attribute available must set it as undefined. When this attribute is available, if the scheme [[URL]] of the current page is HTTPS, this attribute must return the time immediately before the user agent starts the handshake process to secure the current connection. If this attribute is available but HTTPS is not used, this attribute must return zero.

requestStart

This attribute must return the time immediately before the user agent starts requesting the current document from the server, or from relevant application caches or from local resources.

If the transport connection fails after a request is sent and the user agent reopens a connection and resend the request, requestStart should return the corresponding values of the new request.

This interface does not include an attribute to represent the completion of sending the request, e.g., requestEnd.

  • Completion of sending the request from the user agent does not always indicate the corresponding completion time in the network transport, which brings most of the benefit of having such an attribute.
  • Some user agents have high cost to determine the actual completion time of sending the request due to the HTTP layer encapsulation.
responseStart

This attribute must return the time immediately after the user agent receives the first byte of the response from the server, or from relevant application caches or from local resources.

responseEnd

This attribute must return the time immediately after the user agent receives the last byte of the current document or immediately before the transport connection is closed, whichever comes first. The document here can be received either from the server, relevant application caches or from local resources.

domLoading

This attribute must return the time immediately before the user agent sets the current document readiness to "loading".

Due to differences in when a Document object is created in existing user agents, the value returned by the domLoading is implementation specific and should not be used in meaningful metrics.

domInteractive

This attribute must return the time immediately before the user agent sets the current document readiness to "interactive".

domContentLoadedEventStart

This attribute must return the time immediately before the user agent fires the DOMContentLoaded event at the Document.

domContentLoadedEventEnd

This attribute must return the time immediately after the document's DOMContentLoaded event completes.

domComplete

This attribute must return the time immediately before the user agent sets the current document readiness to "complete".

If the current document readiness changes to the same state multiple times, domLoading, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd and domComplete must return the time of the first occurrence of the corresponding document readiness change.

loadEventStart

This attribute must return the time immediately before the load event of the current document is fired. It must return zero when the load event is not fired yet.

loadEventEnd

This attribute must return the time when the load event of the current document is completed. It must return zero when the load event is not fired or is not completed.

toJSON()
Runs [[!WEBIDL]]'s default toJSON operation.

The PerformanceNavigation interface 

[Exposed=Window]
interface PerformanceNavigation {
  const unsigned short TYPE_NAVIGATE = 0;
  const unsigned short TYPE_RELOAD = 1;
  const unsigned short TYPE_BACK_FORWARD = 2;
  const unsigned short TYPE_RESERVED = 255;
  readonly attribute unsigned short type;
  readonly attribute unsigned short redirectCount;
  [Default] object toJSON();
};
TYPE_NAVIGATE

Navigation started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the ones used by TYPE_RELOAD and TYPE_BACK_FORWARD as listed below.

TYPE_RELOAD

Navigation through the reload operation or the location.reload() method.

TYPE_BACK_FORWARD

Navigation through a history traversal operation.

TYPE_RESERVED

Any navigation types not defined by values above.

type

This attribute must return the type of the last non-redirect navigation in the current browsing context. It must have one of the following navigation type values.

Client-side redirects, such as those using the Refresh pragma directive, are not considered HTTP redirects or equivalent by this spec. In those cases, the type attribute should return appropriate value, such as TYPE_RELOAD if reloading the current page, or TYPE_NAVIGATE if navigating to a new URL.

redirectCount

This attribute must return the number of redirects since the last non-redirect navigation under the current browsing context. If there is no redirect or there is any redirect that is not from the same origin as the destination document, this attribute must return zero.

toJSON()
Runs [[!WEBIDL]]'s default toJSON operation.

Extensions to the Performance interface 

        [Exposed=Window]
        partial interface Performance {
          [SameObject]
          readonly attribute PerformanceTiming timing;
          [SameObject]
          readonly attribute PerformanceNavigation navigation;
        };

The Performance interface is defined in [[!PERFORMANCE-TIMELINE-2]].

timing

The timing attribute represents the timing information related to the browsing contexts since the last non-redirect navigation. This attribute is defined by the PerformanceTiming interface.

navigation

The navigation attribute is defined by the PerformanceNavigation interface.

Acknowledgments

Thanks to Anne Van Kesteren, Arvind Jain, Boris Zbarsky, Jason Weber, Jonas Sicking, James Simonsen, Karen Anderson, Nic Jansma, Philippe Le Hegaret, Steve Souders, Todd Reifsteck, Tony Gentilcore, William Chan and Zhiheng Wang for their contributions to this work.