recursal/MDN huggingface dataset:
URLSearchParams: entries() method
=================================

 The **`entries()`** method of the
 `URLSearchParams` interface returns an
 `iterator` allowing iteration through all key/value
 pairs contained in this object. The iterator returns key/value pairs in the same order as they appear in the query string. The key and value of each pair are
 string objects.

**Note:** This feature is available in Web Workers

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

Returns an `iterator`.

Examples
--------


```js
// Create a test URLSearchParams object
const searchParams = new URLSearchParams("key1=value1&key2=value2");

// Display the key/value pairs
for (const [key, value] of searchParams.entries()) {
  console.log(`${key}, ${value}`);
}
```


The result is:
```

key1, value1
key2, value2
```

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

| Specification |
| --- |
| URL Standard # dom-urlsearchparams-urlsearchparams |

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

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

See also
--------

* The `URL` interface.
GPUComputePassEncoder: insertDebugMarker() method
=================================================

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

 The **`insertDebugMarker()`** method of the
 `GPUComputePassEncoder` interface marks a specific point in a series of encoded compute pass commands with a label.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
insertDebugMarker(markerLabel)
```

### Parameters

`markerLabel`

A string representing the label to insert.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

passEncoder.insertDebugMarker("mymarker");

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-insertdebugmarker |

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

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

See also
--------

* The WebGPU API
GPUComputePassEncoder: pushDebugGroup() method
==============================================

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

 The **`pushDebugGroup()`** method of the
 `GPUComputePassEncoder` interface begins a compute pass debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
pushDebugGroup(groupLabel)
```

### Parameters

`groupLabel`

A string representing the label for the debug group.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

const passEncoder = commandEncoder.beginComputePass();

passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER\_SIZE / 64));

passEncoder.popDebugGroup();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-pushdebuggroup |

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

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

See also
--------

* The WebGPU API
GPUComputePassEncoder: popDebugGroup() method
=============================================

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

 The **`popDebugGroup()`** method of the
 `GPUComputePassEncoder` interface ends a compute pass debug group, which is begun with a `pushDebugGroup()` call.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
popDebugGroup()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`popDebugGroup()`**, otherwise a `GPUValidationError` is generated and the `GPUComputePassEncoder` becomes invalid:

* The compute pass encoder's debug stack is not empty (i.e. at least one compute pass debug group was previously started with `pushDebugGroup()`).
Examples
--------


```js
// ...

const passEncoder = commandEncoder.beginComputePass();

passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER\_SIZE / 64));

passEncoder.popDebugGroup();

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-popdebuggroup |

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

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

See also
--------

* The WebGPU API
GPUComputePassEncoder: label property
=====================================

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

 The **`label`** read-only property of the
 `GPUComputePassEncoder` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUCommandEncoder.beginComputePass()` call, or you can get and set it directly on the `GPUComputePassEncoder` object.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPUComputePassEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();

passEncoder.label = "mycomputepassencoder";
console.log(passEncoder.label); // "mycomputepassencoder"
```


Setting a label via the originating `GPUCommandEncoder.beginComputePass()` call, and then getting it via `GPUComputePassEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass({
  label: "mycomputepassencoder",
});

console.log(passEncoder.label); // "mycomputepassencoder"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
GPUComputePassEncoder: setPipeline() method
===========================================

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

 The **`setPipeline()`** method of the
 `GPUComputePassEncoder` interface sets the `GPUComputePipeline` to use for this compute pass.

Syntax
------


```js
setPipeline(pipeline)
```

### Parameters

`pipeline`

The `GPUComputePipeline` to use for this compute pass.

### Return value

None (`Undefined`).

Examples
--------

In our basic compute demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPUComputePassEncoder` created via `beginComputePass()`. The `setPipeline()` call is used as appropriate to set the pipeline to use for this pass.


```js
const BUFFER\_SIZE = 1000;

// ...

// Create GPUCommandEncoder to encode commands to issue to the GPU
const commandEncoder = device.createCommandEncoder();

// Initiate render pass
const passEncoder = commandEncoder.beginComputePass();

// Issue commands
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER\_SIZE / 64));

// End the render pass
passEncoder.end();

// Copy output buffer to staging buffer
commandEncoder.copyBufferToBuffer(
  output,
  0, // Source offset
  stagingBuffer,
  0, // Destination offset
  BUFFER\_SIZE,
);

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpucomputepassencoder-setpipeline |

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

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

See also
--------

* The WebGPU API
GPUComputePassEncoder: end() method
===================================

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

 The **`end()`** method of the
 `GPUComputePassEncoder` interface completes recording of the current compute pass command sequence.

Syntax
------


```js
end()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`end()`**, otherwise a `GPUValidationError` is generated and the `GPUComputePassEncoder` becomes invalid:

* The `GPUComputePassEncoder` is open (i.e. not already ended via an `end()` call).
* any `pushDebugGroup()` calls made on this encoder have a corresponding `popDebugGroup()` call before `end()` is called.
Examples
--------

In our basic compute demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPUComputePassEncoder` created via `GPUCommandEncoder.beginComputePass()`.


```js
const BUFFER\_SIZE = 1000;

// ...

// Create GPUCommandEncoder to encode commands to issue to the GPU
const commandEncoder = device.createCommandEncoder();

// Initiate render pass
const passEncoder = commandEncoder.beginComputePass();

// Issue commands
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(BUFFER\_SIZE / 64));

// End the render pass
passEncoder.end();

// Copy output buffer to staging buffer
commandEncoder.copyBufferToBuffer(
  output,
  0, // Source offset
  stagingBuffer,
  0, // Destination offset
  BUFFER\_SIZE,
);

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

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

| Specification |
| --- |
| WebGPU # dom-gpucomputepassencoder-end |

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

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

See also
--------

* The WebGPU API
MutationEvent: attrChange 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 **`attrChange`** read-only property of the `MutationEvent` interface returns a number indicating what kind of change triggered the `DOMAttrModified` event. The three possible values are `MODIFICATION` (`1`), `ADDITION` (`2`) or `REMOVAL` (`3`). It has no meaning for other events and is then set to `0`.

Value
-----

An integer: `0`, `1` (`MODIFICATION`), `2` (`ADDITION`), or `3` (`REMOVAL`).

Examples
--------


```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.attrChange);
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # dom-mutationevent-attrchange |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MutationEvent: prevValue 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 **`prevValue`** read-only property of the `MutationEvent` interface returns a string. In `DOMAttrModified` events, it represents the previous value of the `Attr` node. In `DOMCharacterDataModified` events, it contains the previous value of the `CharacterData` node. In all other cases, returns the empty string (`""`).

Value
-----

A string.

Examples
--------


```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.previousValue);
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # dom-mutationevent-prevvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MutationEvent: relatedNode 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 **`relatedNode`** read-only property of the `MutationEvent` interface returns a string indicating the node related to the event, like the changed node inside the subtree for `DOMSubtreeModified`.

Value
-----

A string.

Examples
--------


```js
element.addEventListener(
  "DOMSubtreeModified",
  (event) => {
    console.log(event.relatedNode);
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # dom-mutationevent-relatednode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MutationEvent: newValue 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 **`newValue`** read-only property of the `MutationEvent` interface returns a string. In `DOMAttrModified` events, it represents the new value of the `Attr` node. In `DOMCharacterDataModified` events, it contains the new value of the `CharacterData` node. In all other cases, returns the empty string (`""`).

Value
-----

A string.

Examples
--------


```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.newValue);
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # dom-mutationevent-newvalue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MutationEvent: attrName 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 **`attrName`** read-only property of the `MutationEvent` interface returns a string with the name of the node affected by the `DOMAttrModified` event. It has no meaning for other events and is then set to the empty string (`""`).

Value
-----

A string.

Examples
--------


```js
element.addEventListener(
  "DOMAttrModified",
  (event) => {
    console.log(event.attrName);
  },
  false,
);
```

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

| Specification |
| --- |
| UI Events # dom-mutationevent-attrname |

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

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

**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 **`initMutationEvent()`** method of the `MutationEvent` interface initializes the
 value of a mutation event once it's been created (normally using the `Document.createEvent()` method).

This method must be called to set the event before it is dispatched, using `EventTarget.dispatchEvent()`.

**Note:** In general, you won't create these events yourself; they are created by the browser.

Syntax
------


```js
initMutationEvent(type, canBubble, cancelable, relatedNode,
                  prevValue, newValue, attrName, attrChange)
```

### Parameters

`type`

 A string to set the event's `type` to. Browsers set the following values for `MutationEvent`:
 `DOMAttrModified`, `DOMAttributeNameChanged`, `DOMCharacterDataModified`, `DOMElementNameChanged`, `DOMNodeInserted`, `DOMNodeInsertedIntoDocument`, `DOMNodeRemoved`, `DOMNodeRemovedFromDocument`,`DOMSubtreeModified`.


`canBubble`

A boolean indicating whether or not the event can bubble. Sets the value of `Event.bubbles`.

`cancelable`

A boolean indicating whether or not the event's default action can be prevented. Sets the value of `Event.cancelable`.

`relatedNode`

A string representing the new value of the modified node, if any. Sets the value of `MutationEvent.relatedNode`.

`prevValue`

A string representing the previous value of the modified node, if any. Sets the value of `MutationEvent.prevValue`.

`newValue`

A string representing the new value of the modified node, if any. Sets the value of `MutationEvent.newValue`.

`attrName`

A string representing the name of the `Attr` node changed, if any. Sets the value of `MutationEvent.attrName`.

`attrChange`

A integer representing the reason attribute node changed. Sets the value of `MutationEvent.attrChange`.

### Return value

None (`undefined`).

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

| Specification |
| --- |
| UI Events # dom-mutationevent-initmutationevent |

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

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

The **`domainLookupStart`** read-only property returns the `timestamp` immediately before the browser starts the domain name lookup for the resource.

Value
-----

The `domainLookupStart` property can have the following values:

* A `DOMHighResTimeStamp` immediately before the browser starts 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 `domainLookupStart` and `domainLookupEnd` 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 `domainLookupStart` 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-domainlookupstart |

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

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

See also
--------

* `Timing-Allow-Origin`