recursal/MDN huggingface dataset:
PerformanceObserver: observe() method
=====================================

The **`observe()`** method of the **`PerformanceObserver`** interface is used to specify the set of performance entry types to observe.

See `PerformanceEntry.entryType` for a list of entry types and `PerformanceObserver.supportedEntryTypes` for a list of entry types the user agent supports.

When a matching performance entry is recorded, the performance observer's callback function—set when creating the `PerformanceObserver`—is invoked.

Syntax
------


```js
observe(options)
```

### Parameters

`options`

An object with the following possible members:

`buffered`

A boolean flag to indicate whether buffered entries should be queued into the observer's buffer. Must be used only with the "`type`" option.

`durationThreshold`

A `DOMHighResTimeStamp` defining the threshold for `PerformanceEventTiming` entries. Defaults to 104ms and is rounded to the nearest of 8ms. Lowest possible threshold is 16ms. May not be used together with the `entryTypes` option.

`entryTypes`

 An array of string objects, each specifying one performance entry type to observe. May not be used together with
 the "`type`", "`buffered`", or "`durationThreshold`" options.


See `PerformanceEntry.entryType` for a list of valid performance entry type names. Unrecognized types are ignored, though the browser may output a warning message to the console to help developers debug their code. If no valid types are found, `observe()` has no effect.

`type`

A single string specifying exactly one performance entry type to observe. May not be used together with the `entryTypes` option.


### Return value

None (`undefined`).

Examples
--------

### Watching multiple performance entry types

This example creates a `PerformanceObserver` and watches for `"mark"` and `"measure"` entry types as specified by the `entryTypes` option given in the `observe()` method.


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "mark" and "measure" events
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });
```

### Watching a single performance entry type

The following example retrieves buffered events and subscribes to newer events for resource timing events (`PerformanceResourceTiming`) using the `buffered` and `type` configuration options. Whenever you need to configure the observer to use the `buffered` or `durationThreshold` option, use `type` instead of `entryType`. Collecting multiple types of performance entry types will not work otherwise.


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "resource" events
  });
});
observer.observe({ type: "resource", buffered: true });
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver-observe |

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

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

The read-only **`startTime`** property returns the first timestamp recorded for this performance entry. The meaning of this property depends on the value of this entry's `entryType`.

Value
-----

 A `DOMHighResTimeStamp` representing the first timestamp when the
 `performance entry` was created.

The meaning of this property depends on the value of this performance entry's `entryType`:

`element`

Either the value of this entry's `renderTime` if it is not `0`, otherwise the value of this entry's `loadTime`.

`event`

The time the event was created, i.e. the event's `timeStamp` property.

`first-input`

The time the first input event was created, i.e. that event's `timeStamp`.

`largest-contentful-paint`

The value of this entry's `renderTime` if it is not `0`, otherwise the value of this entry's `loadTime`.

`layout-shift`

The time when the layout shift started.

`longtask`

The time when the task started.

`mark`

The time at which the mark was created by a call to `performance.mark()`.

`measure`

The time at which the measure was created by a call to `performance.measure()`.

`navigation`

Always `0`.

`paint`

The time when the paint occurred.

`resource`

The value of this entry's `fetchStart` property.

`taskattribution`

Always `0`.

`visibility-state`

The time when the visibility state change occurred.

Examples
--------

### Using the startTime property

The following example shows the use of the `startTime` property which you can log during performance observation.

Note: The `performance.mark()` method allows you to set your own `startTime`, and the `performance.measure()` method allows to set the start of the measure.


```js
performance.mark("my-mark");
performance.mark("my-other-mark", { startTime: 12.5 });

loginButton.addEventListener("click", (clickEvent) => {
  performance.measure("login-click", { start: clickEvent.timeStamp });
});

function perfObserver(list, observer) {
  list.getEntries().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}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-starttime |

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

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

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

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

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

Examples
--------

### Using the toJSON method

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


```js
performance.mark("debug-marker", {
  detail: "debugging-marker-123",
});

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

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


This would log a JSON object like so:


```json
{
  "name": "debug-marker",
  "entryType": "mark",
  "startTime": 158361,
  "duration": 0
}
```


Note that it doesn't contain `PerformanceMark`'s `detail` property.

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

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-tojson |

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

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

See also
--------

* `JSON`
PerformanceEntry: duration property
===================================

The read-only **`duration`** property returns a timestamp that is the duration of the performance entry. The meaning of this property depends on the value of this entry's `entryType`.

Value
-----

A `DOMHighResTimeStamp` representing the duration of the performance entry. If the duration concept doesn't apply for a particular performance metric, a duration of `0` is returned.

The meaning of this property depends on the value of this performance entry's `entryType`:

`event`

The time from the event's `startTime` to the next rendering paint (rounded to the nearest 8ms).

`first-input`

The time from the first input event's `startTime` to the next rendering paint (rounded to the nearest 8ms).

`longtask`

The elapsed time between the start and end of task, with a 1ms granularity.

`measure`

The duration of the measure.

`navigation`

The difference between the entry's `loadEventEnd` and `startTime` properties.

`resource`

The entry's `responseEnd` value minus the entry's `startTime` value.

For the following entry types, `duration` is not applicable, and in this case the value is always `0`:

* `element`
* `largest-contentful-paint`
* `layout-shift`
* `mark`
* `paint`
* `taskattribution`
* `visibility-state`
Examples
--------

### Using the duration property

The following example logs all observed performance entries with a `duration` larger than `0`.


```js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 0) {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark", "resource"] });
```

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

| Specification |
| --- |
| Performance Timeline # dom-performanceentry-duration |

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

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

The **`desiredSize`** read-only property of the `TransformStreamDefaultController` interface returns the desired size to fill the queue of the associated `ReadableStream`.

The internal queue of a `ReadableStream` contains chunks that have been enqueued, but not yet read. The browser determines the **desired size** to fill the stream, and it is this value returned by the `desiredSize` property.

If the `desiredSize` is `0` then the queue is full. Therefore you can use this information to manually apply backpressure to manage the queue.

Value
-----

The desired size.

Examples
--------

In the next example the `desiredSize` is logged to the console.


```js
console.log(controller.desiredSize);
```

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

| Specification |
| --- |
| Streams Standard # ts-default-controller-desired-size |

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

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

The **`error()`** method of the `TransformStreamDefaultController` interface errors both sides of the stream. Any further interactions with it will fail with the given error message, and any chunks in the queue will be discarded.

Syntax
------


```js
error(reason)
```

### Parameters

`reason`

A string containing the error message to be returned on any further interaction with the stream.

### Return value

None (`undefined`).

Examples
--------

In this example the `error()` method is used when a chunk could not be transformed.


```js
const transformContent = {
  start() {
    /\* … \*/
  },
  async transform(chunk, controller) {
    try {
      chunk = await applyMyTransformation(chunk);
    } catch (err) {
      controller.error(`Unable to transform chunk: ${err}`);
    }
    // …
  },
  // …
};
```

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

| Specification |
| --- |
| Streams Standard # ts-default-controller-error |

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

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

The **`enqueue()`** method of the `TransformStreamDefaultController` interface enqueues the given chunk in the readable side of the stream.

For more information on readable streams and chunks see Using Readable Streams.

Syntax
------


```js
enqueue(chunk)
```

### Parameters

`chunk`

The chunk being queued. A chunk is a single piece of data. It can be any type of data, and a stream can contain chunks of different types.

### Return value

None (`undefined`).

### Exceptions

`TypeError`

 The stream is not readable.
 This might occur if the stream is errored via `controller.error()`, or when it is closed without its controller's `controller.close()` method ever being called.


Examples
--------

In this example an encoded chunk is passed to the queue using the `enqueue()` method.


```js
const textEncoderStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(new TextEncoder().encode(chunk));
  },
  flush(controller) {
    controller.terminate();
  },
});
```

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

| Specification |
| --- |
| Streams Standard # ts-default-controller-enqueue |

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

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

The **`terminate()`** method of the `TransformStreamDefaultController` interface closes the readable side and errors the writable side of the stream.

Syntax
------


```js
terminate()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

In the below example the `terminate()` method is called on a `TransformStreamDefaultController`.


```js
controller.terminate();
```

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

| Specification |
| --- |
| Streams Standard # ts-default-controller-terminate |

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

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

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

The *read-only* **`results`** property of the `XRTransientInputHitTestResult` interface represents an array of `XRHitTestResult` objects containing the hit test results for the input source, ordered by the distance along the ray used to perform the hit test, with the closest result at position 0.

Value
-----

An array of `XRHitTestResult` objects.

Examples
--------

### Accessing transient input hit test results

Two arrays are used to access transient input hit test results. First, you get an array of `XRTransientInputHitTestResult` objects by calling `XRFrame.getHitTestResultsForTransientInput()`. Second, to get to the actual `XRHitTestResult` objects for an input source, you dereference the `results` property on one of the `XRTransientInputHitTestResult` objects.


```js
// frame loop
function onXRFrame(time, xrFrame) {
  let hitTestResults = xrFrame.getHitTestResultsForTransientInput(
    transientHitTestSource,
  );

  hitTestResults.forEach((resultsPerInputSource) => {
    resultsPerInputSource.results.forEach((hitTest) => {
      // do something with the hit test
      hitTest.getPose(referenceSpace);
    });
  });
}
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrtransientinputhittestresult-results |

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

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

See also
--------

* `XRHitTestResult`
XRTransientInputHitTestResult: inputSource property
===================================================

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

The *read-only* **`inputSource`** property of the `XRTransientInputHitTestResult` interface represents an `XRInputSource` object that was used to compute the `results` array.

Value
-----

An `XRInputSource` object.

Examples
--------

### Filtering input sources

The `inputSource` property allows you to filter hit test results by input source.


```js
// frame loop
function onXRFrame(time, xrFrame) {
  let hitTestResults = xrFrame.getHitTestResultsForTransientInput(
    transientHitTestSource,
  );

  hitTestResults.forEach((resultsPerInputSource) => {
    if (resultsPerInputSource.inputSource === myPreferredInputSource) {
      // act on hit test results from the preferred input source
    }
  });
}
```

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

| Specification |
| --- |
| WebXR Hit Test Module # dom-xrtransientinputhittestresult-inputsource |

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

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

See also
--------

* `XRInputSource`
WEBGL\_multi\_draw: multiDrawElementsInstancedWEBGL() method
============================================================

 The **`WEBGL_multi_draw.multiDrawElementsWEBGL()`** method of
 the
 WebGL API renders multiple primitives from
 array data. It is
 identical to multiple calls to the
 `gl.drawElementsInstanced()`
 method.

Syntax
------


```js
multiDrawElementsInstancedWEBGL(mode,
    countsList, countsOffset,
    type,
    firstsList, firstsOffset,
    instanceCountsList, instanceCountsOffset,
    drawCount);
```

### Parameters

`mode`

 A `GLenum`
 specifying the type primitive to render. Possible values are:


* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the
 last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`countsList`

 An `Int32Array`
 or `Array`
 (of `GLint`)
 specifying a list of numbers of indices to be rendered.


`countsOffset`

 A `GLUint`
 defining the starting point into the `countsList` array.


type

 A `GLenum` specifying
 the type of the values in the element array buffer. Possible values are:


* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* When using the `OES_element_index_uint`
 extension:
    + `gl.UNSIGNED_INT`

`offsetsList`

 An `Int32Array`
 or `Array`
 (of `GLsizei`)
 specifying a list of starting indices for the arrays of vector points.


`offsetsOffset`

 A `GLuint`
 defining the starting point into the `offsetsList` array.


`instanceCountsList`

 An `Int32Array`
 or `Array`
 (of `GLsizei`)
 specifying a list of numbers of instances of the range of elements to execute.


`instanceCountsOffset`

 A `GLuint`
 defining the starting point into the `instanceCountsList` array.


`drawCount`

 A `GLsizei`
 specifying the number of instances of the range of elements to execute.


### Return value

None.

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `drawCount` or items in `countsList`,
 `offsetsList`, or `instanceCountsList` are negative,
 a `gl.INVALID_VALUE` error is thrown.
Examples
--------


```js
const counts = new Int32Array(/\* … \*/);
const offsets = new Int32Array(/\* … \*/);
const instanceCounts = new Int32Array(/\* … \*/);
ext.multiDrawElementsInstancedWEBGL(
  gl.TRIANGLES,
  counts,
  0,
  gl.UNSIGNED\_SHORT,
  offsets,
  0,
  instanceCounts,
  0,
  counts.length,
);
```

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

| Specification |
| --- |
| WebGL WEBGL\_multi\_draw Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.drawElements()`
* `WebGL2RenderingContext.drawElementsInstanced()`
WEBGL\_multi\_draw: multiDrawArraysWEBGL() method
=================================================

 The **`WEBGL_multi_draw.multiDrawArraysWEBGL()`** method of the
 WebGL API renders multiple primitives from
 array data. It is
 identical to multiple calls to the
 `gl.drawArrays()`
 method.

Syntax
------


```js
multiDrawArraysWEBGL(mode,
    firstsList, firstsOffset,
    countsList, countsOffset,
    drawCount);
```

### Parameters

`mode`

 A `GLenum`
 specifying the type primitive to render. Possible values are:


* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the
 last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`firstsList`

 An `Int32Array`
 or `Array`
 (of `GLint`)
 specifying a list of starting indices for the arrays of vector points.


`firstsOffset`

 A `GLuint`
 defining the starting point into the `firstsLists` array.


`countsList`

 An `Int32Array`
 or `Array`
 (of `GLsizei`)
 specifying a list of numbers of indices to be rendered.


`countsOffset`

 A `GLuint`
 defining the starting point into the `countsList` array.


`drawCount`

 A `GLsizei`
 specifying the number of instances of the range of elements to execute.


### Return value

None.

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `drawCount` or items in `firstsList` and
 `countsList` are negative,
 a `gl.INVALID_VALUE` error is thrown.
* if `gl.CURRENT_PROGRAM` is
 `null`,
 a `gl.INVALID_OPERATION` error is thrown.
Examples
--------


```js
const firsts = new Int32Array(/\* … \*/);
const counts = new Int32Array(/\* … \*/);
ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
```

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

| Specification |
| --- |
| WebGL WEBGL\_multi\_draw Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.drawArrays()`
* `WebGL2RenderingContext.drawArraysInstanced()`
WEBGL\_multi\_draw: multiDrawArraysInstancedWEBGL() method
==========================================================

 The **`WEBGL_multi_draw.multiDrawArraysInstancedWEBGL()`**
 method of the
 WebGL API renders multiple primitives from
 array data. It is
 identical to multiple calls to the
 `gl.drawArraysInstanced()`
 method.

Syntax
------


```js
multiDrawArraysInstancedWEBGL(mode,
    firstsList, firstsOffset,
    countsList, countsOffset,
    instanceCountsList, instanceCountsOffset,
    drawCount);
```

### Parameters

`mode`

 A `GLenum`
 specifying the type primitive to render. Possible values are:


* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and
 connects the
 last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`firstsList`

 An `Int32Array`
 or `Array`
 (of `GLint`)
 specifying a list of starting indices for the arrays of vector points.


`firstsOffset`

 A `GLuint`
 defining the starting point into the `firstsLists` array.


`countsList`

 An `Int32Array`
 or `Array`
 (of `GLsizei`)
 specifying a list of numbers of indices to be rendered.


`countsOffset`

 A `GLuint`
 defining the starting point into the `countsList` array.


`instanceCountsList`

 An `Int32Array`
 or `Array`
 (of `GLsizei`)
 specifying a list of numbers of instances of the range of elements to execute.


`instanceCountsOffset`

 A `GLuint`
 defining the starting point into the `instanceCountsList` array.


`drawCount`

 A `GLsizei`
 specifying the number of instances of the range of elements to execute.


### Return value

None.

### Exceptions

* If `mode` is not one of the accepted values, a
 `gl.INVALID_ENUM` error is thrown.
* If `drawCount` or items in `firstsList`,
 `countsList`, or `instanceCountsList` are negative,
 a `gl.INVALID_VALUE` error is thrown.
* if `gl.CURRENT_PROGRAM` is
 `null`,
 a `gl.INVALID_OPERATION` error is thrown.
Examples
--------


```js
const firsts = new Int32Array(/\* … \*/);
const counts = new Int32Array(/\* … \*/);
const instanceCounts = new Int32Array(/\* … \*/);
ext.multiDrawArraysInstancedWEBGL(
  gl.TRIANGLES,
  firsts,
  0,
  counts,
  0,
  instanceCounts,
  0,
  firsts.length,
);
```

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

| Specification |
| --- |
| WebGL WEBGL\_multi\_draw Extension Specification  |

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

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

See also
--------

* `WebGLRenderingContext.drawArrays()`
* `WebGL2RenderingContext.drawArraysInstanced()`