recursal/MDN huggingface dataset:
PerformanceNavigationTiming: domComplete property
=================================================

The **`domComplete`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"complete"`.

See also the `complete` state of `Document.readyState` which corresponds to this property and refers to the state in which the document and all sub-resources have finished loading. The state also indicates that the `load` event is about to fire.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"complete"`.

Examples
--------

### Logging DOM completion time

The `domComplete` property can be used to log the time when the DOM is complete.

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
  });
});

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


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-domcomplete |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Document.readyState`
PerformanceNavigationTiming: domInteractive property
====================================================

The **`domInteractive`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"interactive"`.

**Note:** This property is **not** Time to interactive (TTI). This property refers to the time when DOM construction is finished and interaction to it from JavaScript is possible. See also the `interactive` state of `Document.readyState` which corresponds to this property.

Measuring DOM processing time may not be consequential unless your site has a very large HTML source to a construct a Document Object Model from.

If there is no parser-blocking JavaScript then the `DOMContentLoaded` event (see `domContentLoadedEventStart` for the timestamp) will fire immediately after `domInteractive`.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately before the user agent sets the document's `readyState` to `"interactive"`.

Examples
--------

### Logging DOM interaction time

The `domInteractive` property can be used to log the time when the DOM construction has finished and interaction with it is possible.

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `${entry.name}: domInteractive time: ${entry.domInteractive}ms`,
    );
  });
});

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


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`);
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-dominteractive |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `Document.readyState`
PerformanceNavigationTiming: unloadEventEnd property
====================================================

The **`unloadEventEnd`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately after the current document's `unload` event handler completes.

Value
-----

The `unloadEventEnd` property can have the following values:

* A `DOMHighResTimeStamp` representing the time immediately after the current document's `unload` event handler completes.
* `0` if there is no previous document.
* `0` if the previous page was on another origin.
Examples
--------

### Measuring `unload` event handler time

The `unloadEventEnd` property can be used to measure how long it takes process the`unload` event handler.

This is useful to measure the time of long running `unload` event handlers.


```js
window.addEventListener("unload", (event) => {
  // Some long running code
});
```


Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const unloadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
    if (unloadEventTime > 0) {
      console.log(
        `${entry.name}: unload event handler time: ${unloadEventTime}ms`,
      );
    }
  });
});

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


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const loadEventTime = entry.unloadEventEnd - entry.unloadEventStart;
  if (unloadEventTime > 0) {
    console.log(`${entry.name}:
 load event handler time: ${unloadEventTime}ms`);
  }
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-unloadeventend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `unload` event
PerformanceNavigationTiming: domContentLoadedEventEnd property
==============================================================

The **`domContentLoadedEventEnd`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately after the current document's `DOMContentLoaded` event handler completes.

Typically frameworks and libraries wait for the `DOMContentLoaded` event before starting to run their code. We can use the `domContentLoadedEventEnd` and the `domContentLoadedEventStart` properties to calculate how long this takes to run.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately after the current document's `DOMContentLoaded` event handler completes.

Examples
--------

### Measuring `DOMContentLoaded` event handler time

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

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```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 });
```


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const domContentLoadedTime =
    entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
  console.log(
    `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
  );
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-domcontentloadedeventend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* DOMContentLoaded
PerformanceNavigationTiming: domContentLoadedEventStart property
================================================================

The **`domContentLoadedEventStart`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately before the current document's `DOMContentLoaded` event handler starts.

Typically frameworks and libraries wait for the `DOMContentLoaded` event before starting to run their code. We can use the `domContentLoadedEventStart` and the `domContentLoadedEventEnd` properties to calculate how long this takes to run.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately before the current document's `DOMContentLoaded` event handler starts.

Examples
--------

### Measuring `DOMContentLoaded` event handler time

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

Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```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 });
```


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const domContentLoadedTime =
    entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
  console.log(
    `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
  );
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-domcontentloadedeventstart |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* DOMContentLoaded
PerformanceNavigationTiming: loadEventEnd property
==================================================

The **`loadEventEnd`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately after the current document's `load` event handler completes.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately after the current document's `load` event handler completes.

Examples
--------

### Measuring `load` event handler time

The `loadEventEnd` property can be used to measure how long it takes process the`load` event handler.

This is useful to measure the time of long running `load` event handlers.


```js
window.addEventListener("load", (event) => {
  // Some long running code
});
```


Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
    if (loadEventTime > 0) {
      console.log(`${entry.name}: load event handler time: ${loadEventTime}ms`);
    }
  });
});

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


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
  if (loadEventTime > 0) {
    console.log(`${entry.name}:
 load event handler time: ${loadEventTime}ms`);
  }
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-loadeventend |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `load` event
PerformanceNavigationTiming: activationStart property
=====================================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`activationStart`** read-only property represents the time between when a document starts prerendering and when it is activated.

Value
-----

A `DOMHighResTimeStamp` representing the duration between document prerendering start and activation in milliseconds.

The value is `0` if the page has not prerendered or is still prerendering.

Examples
--------

### Detecting prerendered pages

When a prerendered document is activated, `activationStart` is set to the current time. The following function can check whether a page is `prerendering` or has already prerendered:


```js
function pagePrerendered() {
  return (
    document.prerendering ||
    self.performance?.getEntriesByType?.("navigation")[0]?.activationStart > 0
  );
}
```

### Measuring user-perceived performance milestones

With prerendered pages, a page may have been created long before it was actually navigated to. When using the Performance API on prerendered pages, it is vital to compare returned values with `activationStart` in order to avoid misleading measurements.


```js
// Time to when activation occurred
let activationStart =
  performance.getEntriesByType("navigation")[0].activationStart;

// Time to first paint
let firstPaint = performance.getEntriesByName("first-paint")[0].startTime;

// Time to first contentful paint
let firstContentfulPaint = performance.getEntriesByName(
  "first-contentful-paint",
)[0].startTime;

console.log("time to first paint: " + (firstPaint - activationStart));
console.log(
  "time to first-contentful-paint: " + (firstContentfulPaint - activationStart),
);
```

Specifications
--------------

| Specification |
| --- |
| Prerendering Revamped # dom-performancenavigationtiming-activationstart |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Speculation Rules API
* Speculative loading
PerformanceNavigationTiming: loadEventStart property
====================================================

The **`loadEventStart`** read-only property returns a `DOMHighResTimeStamp` representing the time immediately before the current document's `load` event handler starts.

Value
-----

A `DOMHighResTimeStamp` representing the time immediately before the current document's `load` event handler starts.

Examples
--------

### Measuring `load` event handler time

The `loadEventStart` property can be used to measure how long it takes process the`load` event handler.

This is useful to measure the time of long running `load` event handlers.


```js
window.addEventListener("load", (event) => {
  // Some long running code
});
```


Example using a `PerformanceObserver`, which notifies of new `navigation` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
    if (loadEventTime > 0) {
      console.log(`${entry.name}: load event handler time: ${loadEventTime}ms`);
    }
  });
});

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


Example using `Performance.getEntriesByType()`, which only shows `navigation` performance entries present in the browser's performance timeline at the time you call this method:


```js
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
  if (loadEventTime > 0) {
    console.log(`${entry.name}:
 load event handler time: ${loadEventTime}ms`);
  }
});
```

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-loadeventstart |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `load` event
PerformanceNavigationTiming: toJSON() method
============================================

The **`toJSON()`** method of the `PerformanceNavigationTiming` interface is a serializer; it returns a JSON representation of the `PerformanceNavigationTiming` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A `JSON` object that is the serialization of the `PerformanceNavigationTiming` object.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `PerformanceNavigationTiming` object.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ entryTypes: ["navigation"] });
```


This would log a JSON object like so:


```json
{
  "name": "https://en.wikipedia.org/wiki/Main\_Page",
  "entryType": "navigation",
  "startTime": 0,
  "duration": 227.60000002384186,
  "initiatorType": "navigation",
  "nextHopProtocol": "h2",
  "renderBlockingStatus": "blocking",
  "workerStart": 0,
  "redirectStart": 4,
  "redirectEnd": 71.40000000596046,
  "fetchStart": 71.40000000596046,
  "domainLookupStart": 71.40000000596046,
  "domainLookupEnd": 71.40000000596046,
  "connectStart": 71.40000000596046,
  "connectEnd": 71.40000000596046,
  "secureConnectionStart": 71.40000000596046,
  "requestStart": 73.7000000178814,
  "responseStart": 102.90000000596046,
  "responseEnd": 105.2000000178814,
  "transferSize": 19464,
  "encodedBodySize": 19164,
  "decodedBodySize": 83352,
  "serverTiming": [
    {
      "name": "cache",
      "duration": 0,
      "description": "hit-front"
    },
    {
      "name": "host",
      "duration": 0,
      "description": "cp3062"
    }
  ],
  "unloadEventStart": 0,
  "unloadEventEnd": 0,
  "domInteractive": 178.10000002384186,
  "domContentLoadedEventStart": 178.2000000178814,
  "domContentLoadedEventEnd": 178.2000000178814,
  "domComplete": 227.60000002384186,
  "loadEventStart": 227.60000002384186,
  "loadEventEnd": 227.60000002384186,
  "type": "navigate",
  "redirectCount": 1,
  "activationStart": 0
}
```


To get a JSON string, you can use `JSON.stringify(entry)` directly; it will call `toJSON()` automatically.

Specifications
--------------

| Specification |
| --- |
| Navigation Timing Level 2 # dom-performancenavigationtiming-tojson |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `JSON`
VRFieldOfView: downDegrees property
===================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`downDegrees`** read-only property of the `VRFieldOfView` interface returns the number of degrees downwards that the field of view extends in.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Value
-----

A double.

Examples
--------

See `VRFieldOfView` for example code.

Specifications
--------------

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebVR API
VRFieldOfView: upDegrees property
=================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`upDegrees`** read-only property of the `VRFieldOfView` interface returns the number of degrees upwards that the field of view extends in.

**Note:** This property was part of the old WebVR API. It has been superseded by the WebXR Device API.

Value
-----

A double.

Examples
--------

See `VRFieldOfView` for example code.

Specifications
--------------

This property was part of the old WebVR API that has been superseded by the WebXR Device API. It is no longer on track to becoming a standard.

Until all browsers have implemented the new WebXR APIs, it is recommended to rely on frameworks, like A-Frame, Babylon.js, or Three.js, or a polyfill, to develop WebXR applications that will work across all browsers [1].

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* WebVR API