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

The **`decodedBodySize`** read-only property returns the size (in octets) received from the fetch (HTTP or cache) of the message body after removing any applied content encoding (like gzip or Brotli). If the resource is retrieved from an application cache or local resources, it returns the size of the payload after removing any applied content encoding.

Value
-----

The `decodedBodySize` property can have the following values:

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

### Checking if content was compressed

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

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const uncompressed =
      entry.decodedBodySize && entry.decodedBodySize === entry.encodedBodySize;
    if (uncompressed) {
      console.log(`${entry.name} was not compressed!`);
    }
  });
});

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


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


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

### Cross-origin content size information

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

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


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

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

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

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

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

See also
--------

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

The **`secureConnectionStart`** read-only property returns a `timestamp` immediately before the browser starts the handshake process to secure the current connection. If a secure connection is not used, the property returns zero.

Value
-----

The `secureConnectionStart` property can have the following values:

* A `DOMHighResTimeStamp` indicating the time immediately before the browser starts the handshake process to secure the current connection if the resource is fetched over a secure connection.
* `0` if no secure connection is used.
* `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 TLS negotiation time

The `secureConnectionStart` and `requestStart` properties can be used to measure how long it takes for the TLS negotiation to happen.


```js
const tls = entry.requestStart - entry.secureConnectionStart;
```


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 tls = entry.requestStart - entry.secureConnectionStart;
    if (tls > 0) {
      console.log(`${entry.name}: TLS negotiation duration: ${tls}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 tls = entry.requestStart - entry.secureConnectionStart;
  if (tls > 0) {
    console.log(`${entry.name}: TLS negotiation duration: ${tls}ms`);
  }
});
```

### Cross-origin timing information

If the value of the `secureConnectionStart` property is `0`, the resource is either not using a secure connection or it is 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-secureconnectionstart |

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

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

See also
--------

* `Timing-Allow-Origin`
PerformanceResourceTiming: toJSON() method
==========================================

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

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

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

Examples
--------

### Using the toJSON method

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


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

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


This would log a JSON object like so:


```json
{
  "name": "https://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/31px-Commons-logo.svg.png",
  "entryType": "resource",
  "startTime": 110.80000001192093,
  "duration": 11.599999994039536,
  "initiatorType": "img",
  "nextHopProtocol": "h2",
  "renderBlockingStatus": "non-blocking",
  "workerStart": 0,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 110.80000001192093,
  "domainLookupStart": 110.80000001192093,
  "domainLookupEnd": 110.80000001192093,
  "connectStart": 110.80000001192093,
  "connectEnd": 110.80000001192093,
  "secureConnectionStart": 110.80000001192093,
  "requestStart": 117.30000001192093,
  "responseStart": 120.40000000596046,
  "responseStatus": 200,
  "responseEnd": 122.40000000596046,
  "transferSize": 0,
  "encodedBodySize": 880,
  "decodedBodySize": 880,
  "serverTiming": [
    {
      "name": "cache",
      "duration": 0,
      "description": "hit-front"
    },
    {
      "name": "host",
      "duration": 0,
      "description": "cp3061"
    }
  ]
}
```


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

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

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

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

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

See also
--------

* `JSON`
PerformanceResourceTiming: renderBlockingStatus property
========================================================

The **`renderBlockingStatus`** read-only property returns the render-blocking status of the resource.

It is useful to determine resources that:

* weren't render-blocking and therefore could be delayed, or
* were render-blocking and therefore could be preloaded.
Description
-----------

Render-blocking resources are static files, such as fonts, CSS, and JavaScript that block or delay the browser from rendering page content to the screen. The browser determines these blocking resources automatically and doesn't render any pixel to the screen before all stylesheets and synchronous scripts are loaded and evaluated. This prevents Flash of Unstyled Contents ("FOUC").

In addition to the automatic render-blocking mechanism, `blocking="render"` can be provided as an attribute and value to `<script>`, `<style>` or `<link>` elements to specify explicit render-blocking. For example:


```html
<link
 blocking="render"
 rel="preload"
 href="critical-font.woff2"
 as="font"
 crossorigin />
```

Value
-----

The `renderBlockingStatus` property can have the following values:

`"blocking"`

The resource might potentially block rendering.

`"non-blocking"`

The resource does not block rendering.

Examples
--------

### Logging resources that block rendering

The `renderBlockingStatus` property can be used to see resources that block rendering.

Example using a `PerformanceObserver`, which notifies of new `resource` performance entries as they are recorded in the browser's performance timeline. Use the `buffered` option to access entries from before the observer creation.


```js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.renderBlockingStatus === "blocking") {
      console.log(`${entry.name} is render-blocking.`);
    }
  });
});

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


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


```js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});
```

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

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

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

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

The **`refY`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the value of the `refY` attribute of the `<marker>`.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `refY`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `refY` attribute.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.refY.baseVal.value); // 5
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_refY |

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

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

The **`setOrientToAuto()`** method of the `SVGMarkerElement` interface sets the value of the `orient` attribute to `auto`.

Syntax
------


```js
setOrientToAuto()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

In the following example the value of the `orient` attribute is updated using `setOrientToAuto()`.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value);
marker.setOrientToAuto();
console.log(marker.orientAngle.baseVal.value);
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_setOrientToAuto |

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

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

The **`markerHeight`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the height of the `<marker>` viewport as defined by the `markerHeight` attribute.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `height`.

Examples
--------

The `markerHeight` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `markerHeight` attribute.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.markerHeight.baseVal.value); // 6
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerHeight |

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

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

The **`refX`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the value of the `refX` attribute of the `<marker>`.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `refX`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `refX` attribute.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.refX.baseVal.value); // 5
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_refX |

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

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

The **`markerUnits`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedEnumeration` object. This object returns an integer which represents the keyword values that the `markerUnits` attribute accepts.

Value
-----

An `SVGAnimatedEnumeration` object. The `baseVal` property of this object contains one of the following values:

`0`

`SVG_MARKERUNITS_UNKNOWN` which means that the `markerUnits` attribute has a value other than the two predefined keywords.

`1`

`SVG_MARKERUNITS_USERSPACEONUSE` which means that the `markerUnits` attribute has the keyword value `userSpaceOnUse`.

`2`

`SVG_MARKERUNITS_STROKEWIDTH` which means that the `markerUnits` attribute has the keyword value `strokeWidth`.

Examples
--------

The `markerUnits` property returns an `SVGAnimatedEnumeration` object that contains the value of the `markerUnits` attribute.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse"
 markerUnits="strokeWidth">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.markerUnits.baseVal); // 2
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerUnits |

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

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

The **`setOrientToAngle()`** method of the `SVGMarkerElement` interface sets the value of the `orient` attribute to the value in the `SVGAngle` passed in.

Syntax
------


```js
setOrientToAngle(angle)
```

### Parameters

`angle`

An `SVGAngle`.

### Return value

None (`undefined`).

Examples
--------

In the following example the value of the `orient` attribute is updated using `setOrientToAngle()` using an `SVGAngle` created using `SVGSVGElement.createSVGAngle()`.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="90">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let svg = document.getElementById("svg");
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // value in SVG above - 90
let angle = svg.createSVGAngle();
angle.value = "110";
marker.setOrientToAngle(angle);
console.log(marker.orientAngle.baseVal.value); // new value - 110
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_setOrientToAngle |

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

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

The **`markerWidth`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedLength` object containing the width of the `<marker>` viewport as defined by the `markerWidth` attribute.

Value
-----

An `SVGAnimatedLength` object. The `baseVal` property of this object returns an `SVGLength`, the value of which returns the `width`.

Examples
--------

The `markerWidth` property returns an `SVGAnimatedLength` which contains an `SVGLength` with the value of the `markerWidth` attribute.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.markerWidth.baseVal.value); // 6
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_markerWidth |

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

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

The **`orientAngle`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedAngle` object containing the angle of the `orient` attribute.

Value
-----

An `SVGAnimatedAngle` object. The `baseVal` property of this object returns an `SVGAngle`, the value of which returns the `angle`.

Examples
--------

The `orientAngle` property returns an `SVGAnimatedAngle` which contains an `SVGAngle` with the angle set by the `orient` attribute as a number representing the number of degrees the marker is turned.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient=".5turn">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.orientAngle.baseVal.value); // 180 as .5turn is 180deg.
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_orientAngle |

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

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

The **`viewBox`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedRect` object which contains the values set by the `viewBox` attribute on the `<marker>`.

Value
-----

An `SVGAnimatedRect` object. The `baseVal` property of this object returns an `SVGRect` object, from which can be returned the `x` and `y` co-ordinates, plus the `width` and `height` of the `<marker>` `viewBox` attribute.

Examples
--------

This example demonstrates how to return the value of the `width` set for the `viewBox` attribute of `<marker>`.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 viewBox="xMidYMid meet"
 markerWidth="6"
 markerHeight="6"
 orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.viewBox.baseVal.width); //10
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGFitToViewBox\_\_viewBox |

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

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

The **`orientType`** read-only property of the `SVGMarkerElement` interface returns an `SVGAnimatedEnumeration` object indicating whether the `orient` attribute is `auto`, an angle value, or something else.

This *something else* is most likely to be the keyword `auto-start-reverse` however the spec leaves it open for this to be other values. Unsupported values will generally be thrown away by the parser, leaving the value the default of `auto`.

Value
-----

An `SVGAnimatedEnumeration` object. This contains one of the following values:

`0`

`SVG_MARKER_ORIENT_UNKNOWN` which means that the `orient` attribute has a value other than `auto` or an angle.

`1`

`SVG_MARKERUNITS_ORIENT_AUTO` which means that the `orient` attribute has the keyword value `auto`.

`2`

`SVG_MARKERUNITS_ORIENT_ANGLE` which means that the `orient` attribute has an `<angle>` or `<number>` value indicating the angle.

Examples
--------

The `orientType` property returns an `SVGAnimatedEnumeration` object. As the value of the `orient` attribute is an angle, returning the `SVGAnimatedEnumeration.baseVal` returns `2`.


```html
<svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
 id="arrow"
 viewBox="0 0 10 10"
 refX="5"
 refY="5"
 markerWidth="6"
 markerHeight="6"
 orient=".63deg">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>
</svg>
```



```js
let marker = document.getElementById("arrow");
console.log(marker.orientType.baseVal); // 2
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGMarkerElement\_\_orientType |

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

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