recursal/MDN huggingface dataset:
Performance: eventCounts property
=================================

The read-only `performance.eventCounts` property is an `EventCounts` map containing the number of events which have been dispatched per event type.

Not all event types are exposed. You can only get counts for event types supported by the `PerformanceEventTiming` interface.

Value
-----

 An `EventCounts` map.
 (A read-only `Map` without the `clear()`, `delete()`, and `set()` methods).

Examples
--------

### Reporting event types and their counts

If you like to send event counts to your analytics, you may want to implement a function like `sendToEventAnalytics` which takes the event counts from the `performance.eventCounts` map and then uses the Fetch API to post the data to your endpoint.


```js
// Report all exposed events
for (entry of performance.eventCounts.entries()) {
  const type = entry[0];
  const count = entry[1];
  // sendToEventAnalytics(type, count);
}

// Report a specific event
const clickCount = performance.eventCounts.get("click");
// sendToEventAnalytics("click", clickCount);

// Check if an event count is exposed for a type
const isExposed = performance.eventCounts.has("mousemove"); // false
```

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

| Specification |
| --- |
| Event Timing API # dom-performance-eventcounts |

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

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

See also
--------

* `EventCounts`
* `PerformanceEventTiming`
* `Map`
Performance: clearMarks() method
================================

The **`clearMarks()`** method removes all or specific `PerformanceMark` objects from the browser's performance timeline.

Syntax
------


```js
clearMarks()
clearMarks(name)
```

### Parameters

`name` Optional

A string representing the `name` of the `PerformanceMark` object. If this argument is omitted, all entries with an `entryType` of "`mark`" will be removed.

### Return value

None (`undefined`).

Examples
--------

### Removing markers

To clean up all performance marks, or just specific entries, use the `clearMarks()` method like this:


```js
// Create a bunch of marks
performance.mark("login-started");
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");
performance.mark("video-loaded");
performance.mark("video-loaded");

performance.getEntriesByType("mark").length; // 6

// Delete just the "login-started" mark entries
performance.clearMarks("login-started");
performance.getEntriesByType("mark").length; // 4

// Delete all of the mark entries
performance.clearMarks();
performance.getEntriesByType("mark").length; // 0
```

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

| Specification |
| --- |
| User Timing # dom-performance-clearmarks |

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

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

See also
--------

* `PerformanceMark`
Performance: setResourceTimingBufferSize() method
=================================================

The **`setResourceTimingBufferSize()`** method sets the desired size of the browser's resource timing buffer which stores the "`resource`" performance entries.

The specification requires the resource timing buffer initially to be 250 or greater.

 To clear the browser's performance resource data buffer, use the
 `Performance.clearResourceTimings()` method.

To get notified when the browser's resource timing buffer is full, listen for the `resourcetimingbufferfull` event.

Syntax
------


```js
setResourceTimingBufferSize(maxSize)
```

### Parameters

`maxSize`

A `number` representing the maximum number of `performance entry` objects the browser should hold in its performance entry buffer.

### Return value

None (`undefined`).

Examples
--------

### Setting a resource timing buffer size

The following call allows 500 "`resource`" performance entries in the browser's performance timeline.


```js
performance.setResourceTimingBufferSize(500);
```


If you set the buffer size to a number lower than the amount of current entries in the buffer, no entries will be removed. Instead, to clear the buffer, call `Performance.clearResourceTimings()`.


```js
performance.getEntriesByType("resource").length; // 20
performance.setResourceTimingBufferSize(10);
performance.getEntriesByType("resource").length; // 20

performance.clearResourceTimings();
performance.getEntriesByType("resource").length; // 0
```

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

| Specification |
| --- |
| Resource Timing # dom-performance-setresourcetimingbuffersize |

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

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

See also
--------

* `Performance.clearResourceTimings()`
* `resourcetimingbufferfull`
Performance: getEntriesByType() method
======================================

The **`getEntriesByType()`** method returns an array of `PerformanceEntry` objects currently present in the performance timeline for a given *type*.

If you are interested in performance entries of certain name, see `getEntriesByName()`. For all performance entries, see `getEntries()`.

**Note:** This method does not notify you about new performance entries; you will only get entries that are present in the performance timeline at the time you call this method.
 To receive notifications about entries as they become available, use a `PerformanceObserver`.


The following entry types are not supported by this method at all and won't be returned even if entries for these types might exist:

* `"element"` (`PerformanceElementTiming`)
* `"event"` (`PerformanceEventTiming`)
* `"largest-contentful-paint"` (`LargestContentfulPaint`)
* `"layout-shift"` (`LayoutShift`)
* `"longtask"` (`PerformanceLongTaskTiming`)

To access entries of these types, you must use a `PerformanceObserver` instead.

Syntax
------


```js
getEntriesByType(type)
```

### Parameters

`type`

The type of entry to retrieve such as "`mark`". The valid entry types are listed in `PerformanceEntry.entryType`. The supported `entryTypes` can be retrieved using the static property `PerformanceObserver.supportedEntryTypes`.

### Return value

An `Array` of `PerformanceEntry` objects that have the specified `type`. The items will be in chronological order based on the entries' `startTime`. If no objects have the specified `type`, or no argument is provided, an empty array is returned.

Examples
--------

### Logging resource entries

The following example logs all entries with the type "`resource`".


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});
```

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

| Specification |
| --- |
| Performance Timeline # dom-performance-getentriesbytype |

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

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

See also
--------

* `Performance.getEntries()`
* `Performance.getEntriesByName()`
* `PerformanceObserver.supportedEntryTypes`
Performance: getEntries() method
================================

The **`getEntries()`** method returns an array of all `PerformanceEntry` objects currently present in the performance timeline.

If you are only interested in performance entries of certain types or that have certain names, see `getEntriesByType()` and `getEntriesByName()`.

**Note:** This method does not notify you about new performance entries; you will only get entries that are present in the performance timeline at the time you call this method.
 To receive notifications about entries as they become available, use a `PerformanceObserver`.


The following entry types are not supported by this method at all and won't be returned even if entries for these types might exist:

* `"element"` (`PerformanceElementTiming`)
* `"event"` (`PerformanceEventTiming`)
* `"largest-contentful-paint"` (`LargestContentfulPaint`)
* `"layout-shift"` (`LayoutShift`)
* `"longtask"` (`PerformanceLongTaskTiming`)

To access entries of these types, you must use a `PerformanceObserver` instead.

Syntax
------


```js
getEntries()
```

### Parameters

None.

### Return value

An `Array` of `PerformanceEntry` objects. The items will be in chronological order based on the entries' `startTime`.

Examples
--------

### Logging all performance markers and measures

Assuming you created your own `PerformanceMark` and `PerformanceMeasure` objects at appropriate places in your code, you might want to log all them to the console like this:


```js
// Example markers/measures
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");
performance.mark("video-loaded");
performance.measure("login-duration", "login-started", "login-finished");

const entries = performance.getEntries();

entries.forEach((entry) => {
  if (entry.entryType === "mark") {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  }
  if (entry.entryType === "measure") {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});
```

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

| Specification |
| --- |
| Performance Timeline # dom-performance-getentries |

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

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

See also
--------

* `Performance.getEntriesByType()`
* `Performance.getEntriesByName()`
Performance: toJSON() method
============================

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

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

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

The returned JSON doesn't contain the `eventCounts` property because it is of type `EventCounts`, which doesn't provide a `toJSON()` operation.

**Note:** The JSON object contains the serialization of the deprecated `performance.timing` and `performance.navigation` properties. To get a JSON representation of the newer `PerformanceNavigationTiming` interface, call `PerformanceNavigationTiming.toJSON()` instead.

Examples
--------

### Using the toJSON method

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


```js
performance.toJSON();
```


This would log a JSON object like so:


```json
{
  "timeOrigin": 1668077531367.4,
  "timing": {
    "connectStart": 1668077531372,
    "navigationStart": 1668077531367,
    "secureConnectionStart": 0,
    "fetchStart": 1668077531372,
    "domContentLoadedEventStart": 1668077531580,
    "responseStart": 1668077531372,
    "domInteractive": 1668077531524,
    "domainLookupEnd": 1668077531372,
    "responseEnd": 1668077531500,
    "redirectStart": 0,
    "requestStart": 1668077531372,
    "unloadEventEnd": 0,
    "unloadEventStart": 0,
    "domLoading": 1668077531512,
    "domComplete": 1668077531585,
    "domainLookupStart": 1668077531372,
    "loadEventStart": 1668077531585,
    "domContentLoadedEventEnd": 1668077531580,
    "loadEventEnd": 1668077531585,
    "redirectEnd": 0,
    "connectEnd": 1668077531372
  },
  "navigation": {
    "type": 0,
    "redirectCount": 0
  }
}
```


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

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

| Specification |
| --- |
| High Resolution Time # dom-performance-tojson |

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

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

See also
--------

* `JSON`
Performance: memory 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 non-standard and legacy `performance.memory` property returns the size of the JavaScript heap which can be helpful to measure and reduce the memory footprint of websites.

Note that the information this API provides is unreliable as it might overestimate actual memory usage if web pages share the same heap, or might underestimate actual memory usage if web pages use workers and/or cross-site iframes that are allocated in separate heaps. It is not standardized what "heap" means exactly. The API is only available in Chromium-based browsers.

A new API aiming to replace `performance.memory` is `Performance.measureUserAgentSpecificMemory()`. It tries to estimate the memory used by a web page.

Value
-----

The read-only `performance.memory` property is an object with the following properties:

`jsHeapSizeLimit`

The maximum size of the heap, in bytes, that is available to the context.

`totalJSHeapSize`

The total allocated heap size, in bytes.

`usedJSHeapSize`

The currently active segment of JS heap, in bytes.

Examples
--------

### Getting JavaScript heap sizes

Calling `performance.memory` returns an object like this:


```js
{
  totalJSHeapSize: 39973671,
  usedJSHeapSize: 39127515,
  jsHeapSizeLimit: 4294705152
}
```

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

None.

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

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

See also
--------

* `Performance.measureUserAgentSpecificMemory()`
Performance: resourcetimingbufferfull event
===========================================

The `resourcetimingbufferfull` event is fired when the browser's resource timing buffer is full.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("resourcetimingbufferfull", (event) => {});

onresourcetimingbufferfull = (event) => {};
```

Event type
----------

A generic `Event`.

Examples
--------

### Increasing size when buffer is full

The following example listens for the `resourcetimingbufferfull` event and increases the buffer size using the `setResourceTimingBufferSize()` method.


```js
function increaseFilledBufferSize(event) {
  console.log(
    "WARNING: Resource Timing Buffer is FULL! Increasing buffer size to 500.",
  );
  performance.setResourceTimingBufferSize(500);
}

performance.addEventListener(
  "resourcetimingbufferfull",
  increaseFilledBufferSize,
);
```

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

| Specification |
| --- |
| Resource Timing # dom-performance-onresourcetimingbufferfull |

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

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

See also
--------

* `Performance.clearResourceTimings()`
* `Performance.setResourceTimingBufferSize()`
Performance: clearResourceTimings() method
==========================================

The **`clearResourceTimings()`** method removes all performance entries with an `entryType` of "`resource`" from the browser's performance timeline and sets the size of the performance resource data buffer to zero.

 To set the size of the browser's performance resource data buffer, use the
 `Performance.setResourceTimingBufferSize()` method.

To get notified when the browser's resource timing buffer is full, listen for the `resourcetimingbufferfull` event.

Syntax
------


```js
clearResourceTimings()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

### Clearing the performance resource data buffer

To remove all resource performance entries from the buffer, call the `clearResourceTimings()` at an appropriate point in your code or paste it into the console.


```js
performance.clearResourceTimings();
performance.getEntriesByType("resource").length; // 0
```

### Taking records and emptying performance observers

When using `PerformanceObserver` objects (especially with the `buffered` flag set to `true`), the performance resource buffer might get full quickly. However, instead of clearing the buffer, you can also store the current list of performance entries and empty the performance observer using the `PerformanceObserver.takeRecords()` method. This works with all kinds of performance entry types, not just "`resource`" entries.


```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    // do something with the entries
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ type: "resource", buffered: true });

// Store entries and empty performance observer
const records = observer.takeRecords();
```

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

| Specification |
| --- |
| Resource Timing # dom-performance-clearresourcetimings |

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

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

See also
--------

* `Performance.setResourceTimingBufferSize()`
* `resourcetimingbufferfull`
Performance: timing 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.

 The legacy
 **`Performance.timing`** read-only
 property returns a `PerformanceTiming` object containing latency-related
 performance information.

This property is not available in workers.

**Warning:** This property is deprecated in the Navigation Timing Level 2 specification. Please use the `PerformanceNavigationTiming`
 interface instead.


Value
-----

A `PerformanceTiming` object.

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

 This feature is no longer on track to become a standard, as the Navigation Timing specification has marked it as deprecated.
 Use the `PerformanceNavigationTiming` interface instead.

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

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

See also
--------

* The `Performance` interface it belongs to.
XRDepthInformation: rawValueToMeters property
=============================================

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

The *read-only* **`rawValueToMeters`** property of the `XRDepthInformation` interface contains the scale factor by which the raw depth values must be multiplied in order to get the depths in meters.

For CPU depth information, see also the `XRCPUDepthInformation.getDepthInMeters()` method.

Value
-----

A number.

Examples
--------

Use `XRFrame.getDepthInformation()` (CPU) or `XRWebGLBinding.getDepthInformation()` (WebGL) to obtain depth information. The returned objects will contain the `rawValueToMeters` scale factor, which can be used for further calculations.

For CPU depth information and a buffer that has "luminance-alpha" format:


```js
const uint16 = new Uint16Array(depthInfo.data);
const index = column + row \* depthInfo.width;
const depthInMeters = uint16[index] \* depthInfo.rawValueToMeters;
```


(Use `Float32Array` for a "float32" data format.)

Note that the depth in meters is in depth-buffer coordinates. Additional steps are needed to convert them to normalized view coordinates, or the `XRCPUDepthInformation.getDepthInMeters()` method can be used.

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrdepthinformation-rawvaluetometers |

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

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

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

The *read-only* **`normDepthBufferFromNormView`** property of the `XRDepthInformation` interface contains the 3D geometric transform that needs to be applied when indexing into the depth buffer.

Value
-----

An `XRRigidTransform` that needs to be applied when indexing into the depth buffer. The transformation that the matrix represents changes the coordinate system from normalized view coordinates to normalized depth-buffer coordinates that can then be scaled by depth buffer's `width` and `height` to obtain the absolute depth buffer coordinates.

Examples
--------

Use `XRFrame.getDepthInformation()` (CPU) or `XRWebGLBinding.getDepthInformation()` (WebGL) to obtain depth information. The returned objects will contain the `normDepthBufferFromNormView` of the depth buffer, which you can use for further calculations.


```js
const normDepthFromNormViewMatrix =
  depthData.normDepthBufferFromNormView.matrix;
const normViewFromNormDepth =
  depthData.normDepthBufferFromNormView.inverse.matrix;
```

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrdepthinformation-normdepthbufferfromnormview |

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

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

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

The *read-only* **`width`** property of the `XRDepthInformation` interface contains the width of the depth buffer (number of columns).

Value
-----

An unsigned long integer.

Examples
--------

Use `XRFrame.getDepthInformation()` (CPU) or `XRWebGLBinding.getDepthInformation()` (WebGL) to obtain depth information. The returned objects will contain the `width` of the depth buffer, which you can use for further calculations.


```js
const smallerDepthDimension = Math.min(depthInfo.width, depthInfo.height);
const largerDepthDimension = Math.max(depthInfo.width, depthInfo.height);
```

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrdepthinformation-width |

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

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

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

The *read-only* **`height`** property of the `XRDepthInformation` interface contains the height of the depth buffer (number of rows).

Value
-----

An unsigned long integer.

Examples
--------

Use `XRFrame.getDepthInformation()` (CPU) or `XRWebGLBinding.getDepthInformation()` (WebGL) to obtain depth information. The returned objects will contain the `height` of the depth buffer, which you can use for further calculations.


```js
const smallerDepthDimension = Math.min(depthInfo.width, depthInfo.height);
const largerDepthDimension = Math.max(depthInfo.width, depthInfo.height);
```

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

| Specification |
| --- |
| WebXR Depth Sensing Module # dom-xrdepthinformation-height |

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

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