recursal/MDN huggingface dataset:
PerformanceElementTiming: loadTime property
===========================================

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

The **`loadTime`** read-only property of the `PerformanceElementTiming` interface always returns `0` for text. For images it returns the time which is the latest between the time the image resource is loaded and the time it is attached to the element.

Value
-----

A `DOMHighResTimeStamp` with the `loadTime` of the element. Always `0` for text.

Examples
--------

### Logging `loadTime`

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"`. The `buffered` flag is used to access data from before the observer was created. Calling `entry.loadTime` returns the loadTime of the image element.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.loadTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-loadtime① |

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

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

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

The **`element`** read-only property of the `PerformanceElementTiming` interface returns an `Element` which is a pointer to the observed element.

Value
-----

An `Element`, or `null` if the element is a shadow DOM element.

Examples
--------

### Logging the observed element

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The DOM element that is observed is logged to the console.


```html
<img src="image.jpg" alt="a nice image" elementtiming="big-image" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.element);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-element |

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

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

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

The **`naturalHeight`** read-only property of the `PerformanceElementTiming` interface returns the intrinsic height of the image element.

Value
-----

An unsigned 32-bit integer (unsigned long) which is the intrinsic height of the image if this is applied to an image, `0` for text.

Examples
--------

### Logging `naturalHeight`

In this example an `<image>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The image file has a width of 1000px and a height of 750px. Calling `entry.naturalHeight` returns `750`, that being the intrinsic height in pixels.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalHeight);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalheight |

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

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

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

The **`url`** read-only property of the `PerformanceElementTiming` interface returns the initial URL of the resource request when the element is an image.

Value
-----

A string which is the initial URL of the resources request for images or `0` for text.

Examples
--------

### Logging `url`

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.url` returns `https://example.com/image.jpg`.


```html
<img
 src="https://example.com/image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.url);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-url |

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

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

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

The **`identifier`** read-only property of the `PerformanceElementTiming` interface returns the value of the `elementtiming` attribute on the element.

Value
-----

A string.

Examples
--------

### Using `identifier`

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The value of `elementtiming` is `big-image`. Calling `entry.identifier` therefore returns the string `big-image`.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-identifier |

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

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

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

The **`renderTime`** read-only property of the `PerformanceElementTiming` interface returns the render time of the associated element.

Value
-----

A `DOMHighResTimeStamp` with the render time of the element.

For images this will be the **image rendering timestamp**. This is defined as the next paint that occurs after the image becomes fully loaded. If the timing allow check fails (as defined by the Timing-allow-origin header) this will return `0`.

For text nodes this will be the **text rendering timestamp**. This is defined as when the element becomes text painted.

Examples
--------

### Logging `renderTime`

In this example an `<image>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.renderTime` returns the render time of the image element.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

### Cross-origin image render time

For security reasons, the value of the `renderTime` property is `0` if the resource is a cross-origin request. To expose cross-origin render time information, the `Timing-Allow-Origin` HTTP response header needs to be set.

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


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


Alternatively, you can use `startTime` which returns the value of the entry's `renderTime` if it is not `0`, and otherwise the value of this entry's `loadTime`. However, it is recommended to set the `Timing-Allow-Origin` header so that the metrics will be more accurate.

If you use `startTime`, you can flag any inaccuracies by checking if `renderTime` was used:


```js
const isRenderTime = entry.renderTime ? true : false;
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-rendertime① |

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

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

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

The **`id`** read-only property of the `PerformanceElementTiming` interface returns the `id` of the associated element.

Value
-----

A string.

Examples
--------

### Using `id`

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. It will log `myImage` to the console, this being the `id` of the image element.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.id);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-id |

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

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

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

The **`intersectionRect`** read-only property of the `PerformanceElementTiming` interface returns the rectangle of the element within the viewport.

Value
-----

A `DOMRectReadOnly` which is the rectangle of the element within the viewport.

For display images this is the display rectangle of the image within the viewport. For text this is the display rectangle of the node in the viewport. This being the smallest rectangle that contains the union of all text nodes that belong to the element.

Examples
--------

### Logging `intersectionRect`

In this example an `<img>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.intersectionRect` returns a `DOMRectReadOnly` object with the display rectangle of the image.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.intersectionRect);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-intersectionrect |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming: toJSON() method
=========================================

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

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

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

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

The JSON doesn't contain the `element` property because it is of type `Element`, which doesn't provide a `toJSON()` operation. The `id` of the element is provided, though.

Examples
--------

### Using the toJSON method

In this example, calling `entry.toJSON()` returns a JSON representation of the `PerformanceElementTiming` object, with the information about the image element.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.toJSON());
    }
  });
});
observer.observe({ type: "element", buffered: true });
```


This would log a JSON object like so:


```json
{
  "name": "image-paint",
  "entryType": "element",
  "startTime": 670894.1000000238,
  "duration": 0,
  "renderTime": 0,
  "loadTime": 670894.1000000238,
  "intersectionRect": {
    "x": 299,
    "y": 76,
    "width": 135,
    "height": 155,
    "top": 76,
    "right": 434,
    "bottom": 231,
    "left": 299
  },
  "identifier": "big-image",
  "naturalWidth": 135,
  "naturalHeight": 155,
  "id": "myImage",
  "url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
}
```


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

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

| Specification |
| --- |
| Element Timing API # dom-performanceelementtiming-tojson |

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

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

See also
--------

* `JSON`
PerformanceElementTiming: naturalWidth property
===============================================

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

The **`naturalWidth`** read-only property of the `PerformanceElementTiming` interface returns the intrinsic width of the image element.

Value
-----

An unsigned 32-bit integer (unsigned long) which is the intrinsic width of the image if this is applied to an image, `0` for text.

Examples
--------

### Logging `naturalWidth`

In this example an `<image>` element is being observed by adding the `elementtiming` attribute. A `PerformanceObserver` is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The image file has a width of 1000px and a height of 750px. Calling `entry.naturalWidth` returns `1000`, that being the intrinsic width in pixels.


```html
<img
 src="image.jpg"
 alt="a nice image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ type: "element", buffered: true });
```

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

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalwidth |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AuthenticatorAttestationResponse: getPublicKeyAlgorithm() method
================================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`getPublicKeyAlgorithm()`** method of the `AuthenticatorAttestationResponse` interface returns a number that is equal to a COSE Algorithm Identifier, representing the cryptographic algorithm used for the new credential.

This is a convenience function created to allow easy access to the algorithm type. This information will need to be stored in order to verify future authentication operations (i.e., using `navigator.credentials.get()`).

Syntax
------


```js
getPublicKeyAlgorithm()
```

### Parameters

None.

### Return value

A number that is equal to a COSE Algorithm Identifier, representing the cryptographic algorithm used for the new credential.

Examples
--------

See Creating a public key credential using the WebAuthn API for a detailed example.

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-authenticatorattestationresponse-getpublickeyalgorithm |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AuthenticatorAttestationResponse: getAuthenticatorData() method
===============================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`getAuthenticatorData()`** method of the `AuthenticatorAttestationResponse` interface returns an `ArrayBuffer` containing the authenticator data contained within the `AuthenticatorAttestationResponse.attestationObject` property.

This is a convenience function, created to allow easy access to the authenticator data without having to write extra parsing code to extract it from the `attestationObject`.

Syntax
------


```js
getAuthenticatorData()
```

### Parameters

None.

### Return value

An `ArrayBuffer` with a `ArrayBuffer.byteLength` of at least 37 bytes, which contains the data structure explained in Authenticator data.

This will be equivalent to the authenticator data contained within the `AuthenticatorAttestationResponse.attestationObject` property.

Examples
--------

See Creating a public key credential using the WebAuthn API for a detailed example.

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-authenticatorattestationresponse-getauthenticatordata |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AuthenticatorAttestationResponse: getTransports() method
========================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The **`getTransports()`** method of the `AuthenticatorAttestationResponse` interface returns an array of strings describing the different transports which may be used by the authenticator.

Such transports may be USB, NFC, BLE, internal (applicable when the authenticator is not removable from the device), or a hybrid approach. Sites should not interpret this array but instead store it along with the rest of the credential information. In a subsequent `navigator.credentials.get()` call, the `transports` value(s) specified inside `publicKey.allowCredentials` should be set to the stored array value. This provides a hint to the browser as to which types of authenticators to try when making an assertion for this credential.

Syntax
------


```js
getTransports()
```

### Parameters

None.

### Return value

An `Array` of strings representing the different transports supported by the authenticator, in lexicographical order. Values may include:

* `"ble"`: The authenticator may be used over BLE (Bluetooth Low Energy).
* `"hybrid"`: The authenticator can be used over a combination of (often separate) data transport and proximity mechanisms. This supports, for example, authentication on a desktop computer using a smartphone.
* `"internal"`: The authenticator is specifically bound to the client device (cannot be removed).
* `"nfc"`: The authenticator may be used over NFC (Near Field Communication).
* `"usb"`: The authenticator can be contacted over USB.
Examples
--------

See Creating a public key credential using the WebAuthn API for a detailed example.

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

| Specification |
| --- |
| Web Authentication: An API for accessing Public Key Credentials - Level 3 # dom-authenticatorattestationresponse-gettransports |

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

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