recursal/MDN huggingface dataset:
PerformanceResourceTiming: responseStatus property
==================================================

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

The **`responseStatus`** read-only property represents the HTTP response status code returned when fetching the resource.

This property maps to `Response.status` from the Fetch API.

Value
-----

The `responseStatus` property can have the following values:

* A number indicating the HTTP response status code returned when fetching the resource.
* `0` if the CORS check fails.
* `0` for cross-origin `<iframe>` objects.
Examples
--------

### Checking if a cache was hit

The `responseStatus` property can be used to check for cached resources with a `304` `Not Modified` response status code.

Example using a `PerformanceObserver`, which notifies of new `resource` 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) => {
    if (entry.responseStatus === 304) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.responseStatus === 304) {
    console.log(`${entry.name} was loaded from cache`);
  }
});
```


Alternatively, if `responseStatus` is not available, you can check if the `transferSize` property returned `0`.

### Cross-origin response status codes

If the value of the `responseStatus` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin response status codes, the CORS `Access-Control-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see response status codes, the cross-origin resource should send:


```http
Access-Control-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responsestatus |

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

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

See also
--------

* HTTP response status code
* `Response.status`
* CORS
PerformanceResourceTiming: domainLookupEnd property
===================================================

The **`domainLookupEnd`** read-only property returns the `timestamp` immediately after the browser finishes the domain-name lookup for the resource.

If the user agent 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.

Value
-----

The `domainLookupEnd` property can have the following values:

* A `DOMHighResTimeStamp` representing the time immediately after the browser finishes the domain name lookup for the resource.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring DNS lookup time

The `domainLookupEnd` and `domainLookupStart` properties can be used to measure how long it takes for the DNS lookup to happen.


```js
const dns = entry.domainLookupEnd - entry.domainLookupStart;
```


Example using a `PerformanceObserver`, which notifies of new `resource` 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 dns = entry.domainLookupEnd - entry.domainLookupStart;
    if (dns > 0) {
      console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const dns = entry.domainLookupEnd - entry.domainLookupStart;
  if (dns > 0) {
    console.log(`${entry.name}: DNS lookup duration: ${dns}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `domainLookupEnd` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-domainlookupend |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: workerStart property
===============================================

 The **`workerStart`** read-only property of the `PerformanceResourceTiming` interface returns a
 `DOMHighResTimeStamp` immediately before dispatching the `FetchEvent` if a Service Worker thread is already running, or immediately before starting the Service Worker thread if it is not already running. If the resource is not intercepted by a Service Worker the property will always return 0.

Value
-----

The `workerStart` property can have the following values:

* A `DOMHighResTimeStamp`.
* `0` if no service worker is used.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring ServiceWorker processing time

The `workerStart` and `fetchStart` properties can be used to measure the processing time of a `ServiceWorker`.


```js
const workerProcessingTime = entry.fetchStart - entry.workerStart;
```


Example using a `PerformanceObserver`, which notifies of new `resource` 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 workerProcessingTime = entry.fetchStart - entry.workerStart;
    if (workerProcessingTime > 0) {
      console.log(
        `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
      );
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const workerProcessingTime = entry.fetchStart - entry.workerStart;
  if (workerProcessingTime > 0) {
    console.log(
      `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
    );
  }
});
```

### Cross-origin timing information

If the value of the `workerStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-workerstart |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: responseStart property
=================================================

The **`responseStart`** read-only property returns a `timestamp` immediately after the browser receives the first byte of the response from the server, cache, or local resource.

Value
-----

The `responseStart` property can have the following values:

* A `DOMHighResTimeStamp` immediately after the browser receives the first byte of the response from the server.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring request time

The `responseStart` and `requestStart` properties can be used to measure how long the request takes.


```js
const request = entry.responseStart - entry.requestStart;
```


Example using a `PerformanceObserver`, which notifies of new `resource` 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 request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `responseStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responsestart |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: encodedBodySize property
===================================================

 The **`encodedBodySize`** read-only property represents the size (in octets) received from the fetch (HTTP or cache) of the payload body before removing any applied content encodings (like gzip or Brotli). If the resource is retrieved from an application cache or a local resource, it must
 return the size of the payload body before removing any applied content encoding.

Value
-----

The `encodedBodySize` property can have the following values:

* A number representing the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content encoding.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Checking if content was compressed

If the `encodedBodySize` and `decodedBodySize` properties are non-null and differ, the content was compressed (for example, gzip or Brotli).

Example using a `PerformanceObserver`, which notifies of new `resource` 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 uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const uncompressed =
    entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
  if (uncompressed) {
    console.log(`${entry.name} was not compressed!`);
  }
});
```

### Cross-origin content size information

If the value of the `encodedBodySize` property is `0`, the resource might be a cross-origin request. To expose cross-origin content size information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see content sizes, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-encodedbodysize |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: deliveryType property
================================================

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

The **`deliveryType`** read-only property is a string indicating how the resource was delivered — for example from the cache or from a navigational prefetch.

Value
-----

A string, which can be one of the following values:

`"cache"`

The resource was retrieved from the cache.

`"navigational-prefetch"` 
Experimental

The resource was retrieved from a prefetched response stored in an in-memory cache via the Speculation Rules API.

`""` (empty string)

Returned if none of the above delivery types apply.

Examples
--------

### Filtering resources

The `deliveryType` property can be used to get specific resource timing entries only; for example, only those that were cached.

The following example uses a `PerformanceObserver` to notify of new `resource` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used for accessing entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  const cachedResources = list.getEntries().filter((entry) => {
    return entry.deliveryType === "cache";
  });
  console.log(cachedResources);
});

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


The following example uses `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call the method.


```js
const scripts = performance.getEntriesByType("resource").filter((entry) => {
  return entry.deliveryType === "cache";
});
console.log(scripts);
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-deliverytype |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceResourceTiming: firstInterimResponseStart property
=============================================================

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

The **`firstInterimResponseStart`** read-only property returns a `timestamp` immediately after the browser receives the first byte of the interim 1xx response (for example, 100 Continue or 103 Early Hints) from the server.

There is no *end* property for `firstInterimResponseStart`.

Value
-----

The `firstInterimResponseStart` property can have the following values:

* A `DOMHighResTimeStamp` immediately after the browser receives the first interim bytes of the response from the server.
* `0` if the resource was instantaneously retrieved from a cache.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring request time

The `firstInterimResponseStart` and `requestStart` properties can be used to measure how long it takes to the browser to receive an interim response after the sending the request.


```js
const request = entry.firstInterimResponseStart - entry.requestStart;
```


The following example uses a `PerformanceObserver` to notify of new `resource` performance entries as they are recorded in the browser's performance timeline. The `buffered` option is used for accessing entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.firstInterimResponseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Interim response time: ${request}ms`);
    }
  });
});

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


The following example uses `Performance.getEntriesByType()`, which only shows `resource` performance entries present in the browser's performance timeline at the time you call the method.


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.firstInterimResponseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Interim response time: ${request}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `firstInterimResponseStart` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-firstinterimresponsestart |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: redirectEnd property
===============================================

The **`redirectEnd`** read-only property returns a `timestamp` immediately after receiving the last byte of the response of the last redirect.

When fetching a resource, if there are multiple HTTP redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned.

To get the amount of redirects, see also `PerformanceNavigationTiming.redirectCount`.

Value
-----

The `redirectEnd` property can have the following values:

* A `timestamp` immediately after receiving the last byte of the response of the last redirect.
* `0` if there is no redirect.
* `0` if the resource is a cross-origin request and no `Timing-Allow-Origin` HTTP response header is used.
Examples
--------

### Measuring redirection time

The `redirectEnd` and `redirectStart` properties can be used to measure how long the redirection takes.


```js
const redirect = entry.redirectEnd - entry.redirectStart;
```


Example using a `PerformanceObserver`, which notifies of new `resource` 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 redirect = entry.redirectEnd - entry.redirectStart;
    if (redirect > 0) {
      console.log(`${entry.name}: Redirect time: ${redirect}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const redirect = entry.redirectEnd - entry.redirectStart;
  if (redirect > 0) {
    console.log(`${entry.name}: Redirect time: ${redirect}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `redirectEnd` property is `0`, the resource might be a cross-origin request. To allow seeing cross-origin timing information, the `Timing-Allow-Origin` HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see timing resources, the cross-origin resource should send:


```http
Timing-Allow-Origin: https://developer.mozilla.org
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-redirectend |

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

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

See also
--------

* `PerformanceNavigationTiming.redirectCount`
* `Timing-Allow-Origin`
PerformanceResourceTiming: responseEnd property
===============================================

The **`responseEnd`** read-only property returns a `timestamp` immediately after the browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.

Unlike many other `PerformanceResourceTiming` properties, the `responseEnd` property is available for cross-origin requests without the need of the `Timing-Allow-Origin` HTTP response header.

Value
-----

 A `DOMHighResTimeStamp` immediately after the browser receives the last
 byte of the resource or immediately before the transport connection is closed, whichever
 comes first.

Examples
--------

### Measuring time to fetch (without redirects)

The `responseEnd` and `fetchStart` properties can be used to measure the overall time it took to fetch the final resource (without redirects). If you want to include redirects, the overall time to fetch is provided in the `duration` property.


```js
const timeToFetch = entry.responseEnd - entry.fetchStart;
```


Example using a `PerformanceObserver`, which notifies of new `resource` 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 timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});
```

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

| Specification |
| --- |
| Resource Timing # dom-performanceresourcetiming-responseend |

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

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