diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index dc0cdf0c0bdf776..0d59b106d1ba511 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8075,6 +8075,7 @@ /en-US/docs/Web/API/ElementTraversal.lastElementChild /en-US/docs/Web/API/Element/lastElementChild /en-US/docs/Web/API/ElementTraversal.nextElementSibling /en-US/docs/Web/API/Element/nextElementSibling /en-US/docs/Web/API/ElementTraversal.previousElementSibling /en-US/docs/Web/API/Element/previousElementSibling +/en-US/docs/Web/API/Element_Timing_API /en-US/docs/Web/API/PerformanceElementTiming /en-US/docs/Web/API/EncryptedMediaExtensions /en-US/docs/Web/API/Encrypted_Media_Extensions_API /en-US/docs/Web/API/EncryptedMediaExtensions_API /en-US/docs/Web/API/Encrypted_Media_Extensions_API /en-US/docs/Web/API/Entry /en-US/docs/Web/API/FileSystemEntry diff --git a/files/en-us/web/api/element/elementtiming/index.md b/files/en-us/web/api/element/elementtiming/index.md new file mode 100644 index 000000000000000..1767ba10a6e2796 --- /dev/null +++ b/files/en-us/web/api/element/elementtiming/index.md @@ -0,0 +1,50 @@ +--- +title: Element.elementTiming +slug: Web/API/Element/elementTiming +page-type: web-api-instance-property +browser-compat: api.Element.elementTiming +--- + +{{DefaultAPISidebar("DOM")}} + +The **`elementTiming`** property of the {{domxref("Element")}} interface identifies elements for observation in the {{domxref("PerformanceElementTiming")}} API. The `elementTiming` property reflects the value of the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. + +## Value + +A string. + +## Examples + +### Logging the value of `elementTiming` + +In this example, adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute to the {{HTMLElement("img")}} element sets the image to be observed. + +```html +a nice image +``` + +You can get the string value of the `elementtiming` HTML attribute by calling `el.elementTiming`. + +```js +const el = document.getElementById("myImage"); +console.log(el.elementTiming); // "big-image" +``` + +For a more complete example on how to use the Element Timing API, see {{domxref("PerformanceElementTiming")}}. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("PerformanceElementTiming")}} +- [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) HTML attribute diff --git a/files/en-us/web/api/element/index.md b/files/en-us/web/api/element/index.md index e942375744f83eb..f5d01bb5a11c582 100644 --- a/files/en-us/web/api/element/index.md +++ b/files/en-us/web/api/element/index.md @@ -47,6 +47,8 @@ _`Element` inherits properties from its parent interface, {{DOMxRef("Node")}}, a - : Returns a number representing the width of the top border of the element. - {{DOMxRef("Element.clientWidth")}} {{ReadOnlyInline}} - : Returns a number representing the inner width of the element. +- {{DOMxRef("Element.elementTiming")}} + - : A string reflecting the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute which marks an element for observation in the {{domxref("PerformanceElementTiming")}} API. - {{domxref("Element.firstElementChild")}} {{ReadOnlyInline}} - : Returns the first child element of this element. - {{DOMxRef("Element.id")}} diff --git a/files/en-us/web/api/element_timing_api/index.md b/files/en-us/web/api/element_timing_api/index.md deleted file mode 100644 index 59222abe6097723..000000000000000 --- a/files/en-us/web/api/element_timing_api/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Element Timing API -slug: Web/API/Element_timing_API -page-type: web-api-overview -tags: - - API - - ElementTiming - - Performance - - Overview - - Reference - - Experimental -browser-compat: api.PerformanceElementTiming ---- - -{{DefaultAPISidebar("Performance API")}}{{SeeCompatTable}} - -The **Element Timing API** provides features for monitoring the loading performance of large image elements and text nodes as they appear on screen. - -## Concepts and Usage - -The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page. - -The API supports timing information on {{htmlelement("img")}} elements, {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, poster images of {{htmlelement("video")}} elements, elements which have a {{cssxref("background-image")}}, and groups of text nodes, such as a {{htmlelement("p")}}. - -The author flags an element for observation by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute on the element. - -## Interfaces - -- {{domxref("PerformanceElementTiming")}} - - : Reports timing information about one associated element. - -## Examples - -In this example we have two elements which are being observed. We use the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events, in our case observing the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface from the Element Timing API. - -Two entries will be output to the console, the first containing details of the image, the second with details of the text node. - -```html - -

text here

-``` - -```js -const observer = new PerformanceObserver((list) => { - let entries = list.getEntries().forEach((entry) => { - console.log(entry); - }); -}); -observer.observe({ entryTypes: ["element"] }); -``` - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{domxref("PerformanceNavigationTiming")}} -- {{domxref("PerformanceResourceTiming")}} -- {{domxref("PerformanceMark")}} -- {{domxref("PerformanceMeasure")}} -- {{domxref("PerformancePaintTiming")}} -- {{domxref("PerformanceLongTaskTiming")}} diff --git a/files/en-us/web/api/performanceelementtiming/element/index.md b/files/en-us/web/api/performanceelementtiming/element/index.md index 0b01ee11087acae..8bc2c61987687ae 100644 --- a/files/en-us/web/api/performanceelementtiming/element/index.md +++ b/files/en-us/web/api/performanceelementtiming/element/index.md @@ -14,16 +14,17 @@ browser-compat: api.PerformanceElementTiming.element {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`element`** read-only property of the {{domxref("PerformanceElementTiming")}} interface returns an {{domxref("Element")}} which is a literal representation of the associated element. +The **`element`** read-only property of the {{domxref("PerformanceElementTiming")}} interface returns an {{domxref("Element")}} which is a pointer to the observed element. ## Value -An {{domxref("Element")}}. +An {{domxref("Element")}} or {{jsxref("null")}} if the element is a [shadow DOM](/en-US/docs/Web/Web_Components/Using_shadow_DOM) element. ## Examples -In this example calling `entry.element` will log to the console -`a nice image`. +### Logging the observed element + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The DOM element that is observed is logged to the console. ```html a nice image @@ -37,11 +38,9 @@ const observer = new PerformanceObserver((list) => { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/id/index.md b/files/en-us/web/api/performanceelementtiming/id/index.md index 5c4abbce071bda6..4730293dd610314 100644 --- a/files/en-us/web/api/performanceelementtiming/id/index.md +++ b/files/en-us/web/api/performanceelementtiming/id/index.md @@ -22,7 +22,9 @@ A string. ## Examples -In this example calling `entry.id` will log to the console `myImage`, this being the {{htmlattrxref("id")}} of the image element. +### Using `id` + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. It will log `myImage` to the console, this being the {{htmlattrxref("id")}} of the image element. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/identifier/index.md b/files/en-us/web/api/performanceelementtiming/identifier/index.md index cc99673b32c1522..5dea910250f1902 100644 --- a/files/en-us/web/api/performanceelementtiming/identifier/index.md +++ b/files/en-us/web/api/performanceelementtiming/identifier/index.md @@ -22,7 +22,9 @@ A string. ## Examples -In this example the value of [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) is `big-image`. Calling `entry.identifier` therefore returns the string `big-image`. +### Using `identifier` + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The value of [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) is `big-image`. Calling `entry.identifier` therefore returns the string `big-image`. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/index.md b/files/en-us/web/api/performanceelementtiming/index.md index da3cbbfca0a5ee8..ebf066199a5d1c4 100644 --- a/files/en-us/web/api/performanceelementtiming/index.md +++ b/files/en-us/web/api/performanceelementtiming/index.md @@ -13,12 +13,41 @@ browser-compat: api.PerformanceElementTiming {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`PerformanceElementTiming`** interface of the {{domxref('Element Timing API','','',' ')}} reports timing information on a specific element identified by the page author. For example it could report timing information about the main image in an article. +The **`PerformanceElementTiming`** interface contains render timing information for image and text node elements the developer annotated with an [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute for observation. + +## Description + +The aim of the Element Timing API is to give web developers or analytics tools the ability to measure rendering timestamps of critical elements on a page. + +The API supports timing information on the following elements: + +- {{htmlelement("img")}} elements, +- {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, +- [poster](/en-US/docs/Web/HTML/Element/video#attr-poster) images of {{htmlelement("video")}} elements, +- elements which have a {{cssxref("background-image")}}, and +- groups of text nodes, such as a {{htmlelement("p")}}. + +The author flags an element for observation by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute on the element. + +`PerformanceElementTiming` inherits from {{domxref("PerformanceEntry")}}. {{InheritanceDiagram}} ## Instance properties +This interface extends the following {{domxref("PerformanceEntry")}} properties for event timing performance entry types by qualifying them as follows: + +- {{domxref("PerformanceEntry.duration")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Always returns `0` as `duration` does not apply to this interface. +- {{domxref("PerformanceEntry.entryType")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Always returns `"element"`. +- {{domxref("PerformanceEntry.name")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns `"image-paint"` for images and `"text-paint"` for text. +- {{domxref("PerformanceEntry.startTime")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : Returns the value of this entry's {{domxref("PerformanceElementTiming.renderTime", "renderTime")}} if it is not `0`, otherwise the value of this entry's {{domxref("PerformanceElementTiming.loadTime", "loadTime")}}. + +This interface also supports the following properties: + - {{domxref("PerformanceElementTiming.element")}} {{ReadOnlyInline}} {{Experimental_Inline}} - : An {{domxref("Element")}} representing the element we are returning information about. - {{domxref("PerformanceElementTiming.id")}} {{ReadOnlyInline}} {{Experimental_Inline}} @@ -45,9 +74,9 @@ The **`PerformanceElementTiming`** interface of the {{domxref('Element Timing AP ## Examples -In this example we have two elements which are being observed. We use the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case observing the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. +### Observing render time of specific elements -Two entries will be output to the console. The first containing details of the image, the second with details of the text node. +In this example two elements are being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. ```html @@ -57,12 +86,14 @@ Two entries will be output to the console. The first containing details of the i ```js const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { - console.log(entry); + console.log(entry); }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` +Two entries will be output to the console. The first containing details of the image, the second with details of the text node. + ## Specifications {{Specifications}} @@ -70,3 +101,7 @@ observer.observe({ entryTypes: ["element"] }); ## Browser compatibility {{Compat}} + +## See also + +- [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) HTML attribute diff --git a/files/en-us/web/api/performanceelementtiming/intersectionrect/index.md b/files/en-us/web/api/performanceelementtiming/intersectionrect/index.md index 4dc0e6ad3fd8f9d..61720a18aab6d95 100644 --- a/files/en-us/web/api/performanceelementtiming/intersectionrect/index.md +++ b/files/en-us/web/api/performanceelementtiming/intersectionrect/index.md @@ -24,7 +24,9 @@ For display images this is the display rectangle of the image within the viewpor ## Examples -In this example calling `entry.intersectionRect` returns a {{domxref("DOMRectReadOnly")}} object with the display rectangle of the image. +### Logging `intersectionRect` + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.intersectionRect` returns a {{domxref("DOMRectReadOnly")}} object with the display rectangle of the image. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/loadtime/index.md b/files/en-us/web/api/performanceelementtiming/loadtime/index.md index f139f3acabc62f0..f924054b8cce3f5 100644 --- a/files/en-us/web/api/performanceelementtiming/loadtime/index.md +++ b/files/en-us/web/api/performanceelementtiming/loadtime/index.md @@ -14,15 +14,17 @@ browser-compat: api.PerformanceElementTiming.loadTime {{APIRef("Performance API")}}{{SeeCompatTable}} -The **`loadTime`** read-only property of the {{domxref("PerformanceElementTiming")}} interface always returns 0 for text. For images it returns the time which is the latest between the time the image resource is loaded and the time it is attached to the element. +The **`loadTime`** read-only property of the {{domxref("PerformanceElementTiming")}} interface always returns `0` for text. For images it returns the time which is the latest between the time the image resource is loaded and the time it is attached to the element. ## Value -A {{domxref("DOMHighResTimeStamp")}} with the loadTime of the element. +A {{domxref("DOMHighResTimeStamp")}} with the `loadTime` of the element. Always `0` for text. ## Examples -In this example calling `entry.loadTime` returns the loadTime of the image element. +### Logging `loadTime` + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"`. The `buffered` flag is used to access data from before the observer was created. Calling `entry.loadTime` returns the loadTime of the image element. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/naturalheight/index.md b/files/en-us/web/api/performanceelementtiming/naturalheight/index.md index 96ea4b5a36421b7..66bc32dae737d31 100644 --- a/files/en-us/web/api/performanceelementtiming/naturalheight/index.md +++ b/files/en-us/web/api/performanceelementtiming/naturalheight/index.md @@ -18,11 +18,13 @@ The **`naturalHeight`** read-only property of the {{domxref("PerformanceElementT ## Value -An unsigned 32-bit integer (unsigned long) which is the intrinsic height of the image if this is applied to an image, 0 for text. +An unsigned 32-bit integer (unsigned long) which is the intrinsic height of the image if this is applied to an image, `0` for text. ## Examples -In this example the image file has a width of 1000px and a height of 750px. Calling `entry.naturalHeight` returns `750`, that being the intrinsic height in pixels. +### Logging `naturalHeight` + +In this example an {{HTMLElement("image")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The image file has a width of 1000px and a height of 750px. Calling `entry.naturalHeight` returns `750`, that being the intrinsic height in pixels. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/naturalwidth/index.md b/files/en-us/web/api/performanceelementtiming/naturalwidth/index.md index a6ed4a621e2fdcd..712cd3a578132ec 100644 --- a/files/en-us/web/api/performanceelementtiming/naturalwidth/index.md +++ b/files/en-us/web/api/performanceelementtiming/naturalwidth/index.md @@ -18,11 +18,13 @@ The **`naturalWidth`** read-only property of the {{domxref("PerformanceElementTi ## Value -An unsigned 32-bit integer (unsigned long) which is the intrinsic width of the image if this is applied to an image, 0 for text. +An unsigned 32-bit integer (unsigned long) which is the intrinsic width of the image if this is applied to an image, `0` for text. ## Examples -In this example the image file has a width of 1000px and a height of 750px. Calling `entry.naturalWidth` returns `1000`, that being the intrinsic width in pixels. +### Logging `naturalWidth` + +In this example an {{HTMLElement("image")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. The image file has a width of 1000px and a height of 750px. Calling `entry.naturalWidth` returns `1000`, that being the intrinsic width in pixels. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/performanceelementtiming/rendertime/index.md b/files/en-us/web/api/performanceelementtiming/rendertime/index.md index 3b3b5a2a4fea308..cefc2a4f30b9153 100644 --- a/files/en-us/web/api/performanceelementtiming/rendertime/index.md +++ b/files/en-us/web/api/performanceelementtiming/rendertime/index.md @@ -20,13 +20,15 @@ The **`renderTime`** read-only property of the {{domxref("PerformanceElementTimi A {{domxref("DOMHighResTimeStamp")}} with the render time of the element. -For images this will be the **image rendering timestamp**. This is defined as the next paint that occurs after the image becomes fully loaded. If the timing allow check fails (as defined by the [Timing-allow-origin](/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin) header) this will return 0. +For images this will be the **image rendering timestamp**. This is defined as the next paint that occurs after the image becomes fully loaded. If the timing allow check fails (as defined by the [Timing-allow-origin](/en-US/docs/Web/HTTP/Headers/Timing-Allow-Origin) header) this will return `0`. For text nodes this will be the **text rendering timestamp**. This is defined as when the element becomes text painted. ## Examples -In this example calling `entry.renderTime` returns the render time of the image element. +### Logging `renderTime` + +In this example an {{HTMLElement("image")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.renderTime` returns the render time of the image element. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); +``` + +### Cross-origin image render time + +For security reasons, the value of the `renderTime` property is `0` if the resource is a cross-origin request. To expose cross-origin render time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set. + +For example, to allow `https://developer.mozilla.org` to see `renderTime`, the cross-origin resource should send: + +```http +Timing-Allow-Origin: https://developer.mozilla.org ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. +Alternatively, you can use {{domxref("PerformanceEntry.startTime", "startTime")}} which returns the value of the entry's `renderTime` if it is not `0`, and otherwise the value of this entry's {{domxref("PerformanceElementTiming.loadTime", "loadTime")}}. However, it is recommended to set the {{HTTPHeader("Timing-Allow-Origin")}} header so that the metrics will be more accurate. + +If you use `startTime`, you can flag any inaccuracies by checking if `renderTime` was used: + +```js +const isRenderTime = entry.renderTime ? true : false; +``` ## Specifications diff --git a/files/en-us/web/api/performanceelementtiming/tojson/index.md b/files/en-us/web/api/performanceelementtiming/tojson/index.md index 7300bc8a16810bd..60c82cccbdd8571 100644 --- a/files/en-us/web/api/performanceelementtiming/tojson/index.md +++ b/files/en-us/web/api/performanceelementtiming/tojson/index.md @@ -54,7 +54,7 @@ const observer = new PerformanceObserver((list) => { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` This would log a JSON object like so: @@ -70,12 +70,12 @@ This would log a JSON object like so: "intersectionRect": { "x": 299, "y": 76, - "width": 135, - "height": 155, - "top": 76, - "right": 434, - "bottom": 231, - "left": 299 + "width": 135, + "height": 155, + "top": 76, + "right": 434, + "bottom": 231, + "left": 299 }, "identifier": "big-image", "naturalWidth": 135, diff --git a/files/en-us/web/api/performanceelementtiming/url/index.md b/files/en-us/web/api/performanceelementtiming/url/index.md index 885964f47947cf4..3621c1577a44c12 100644 --- a/files/en-us/web/api/performanceelementtiming/url/index.md +++ b/files/en-us/web/api/performanceelementtiming/url/index.md @@ -18,11 +18,13 @@ The **`url`** read-only property of the {{domxref("PerformanceElementTiming")}} ## Value -A string which is the initial URL of the resources request for images or 0 for text. +A string which is the initial URL of the resources request for images or `0` for text. ## Examples -In this example calling `entry.url` returns `https://example.com/image.jpg`. +### Logging `url` + +In this example an {{HTMLElement("img")}} element is being observed by adding the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute. A {{domxref("PerformanceObserver")}} is registered to get all performance entries of type `"element"` and the `buffered` flag is used to access data from before observer creation. Calling `entry.url` returns `https://example.com/image.jpg`. ```html { } }); }); -observer.observe({ entryTypes: ["element"] }); +observer.observe({ type: "element", buffered: true }); ``` -> **Note:** This example uses the {{domxref("PerformanceObserver")}} interface to create a list of performance measurement events. In our case we observe the {{domxref("PerformanceEntry.entrytype")}} `element` in order to use the `PerformanceElementTiming` interface. - ## Specifications {{Specifications}} diff --git a/files/en-us/web/html/attributes/elementtiming/index.md b/files/en-us/web/html/attributes/elementtiming/index.md index e960a354cb9aa5b..90881fdcad6a90e 100644 --- a/files/en-us/web/html/attributes/elementtiming/index.md +++ b/files/en-us/web/html/attributes/elementtiming/index.md @@ -1,5 +1,5 @@ --- -title: 'HTML attribute: elementtiming' +title: "HTML attribute: elementtiming" slug: Web/HTML/Attributes/elementtiming tags: - Attribute @@ -12,7 +12,11 @@ tags: {{HTMLSidebar}} -The **`elementtiming`** attribute is used to indicate that an element is flagged for tracking by the {{domxref("Element Timing API")}}. This attribute may be applied to {{htmlelement("img")}}, {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, poster images of {{htmlelement("video")}} elements, elements which have a {{cssxref("background-image")}}, and elements containing text nodes, such as a {{htmlelement("p")}}. +The **`elementtiming`** attribute is used to indicate that an element is flagged for tracking by {{domxref("PerformanceObserver")}} objects using the `"element"` type. For more details, see the {{domxref("PerformanceElementTiming")}} interface. + +This attribute may be applied to {{htmlelement("img")}}, {{SVGElement("image")}} elements inside an {{SVGElement("svg")}}, poster images of {{htmlelement("video")}} elements, elements which have a {{cssxref("background-image")}}, and elements containing text nodes, such as a {{htmlelement("p")}}. + +In the DOM, this attribute is reflected as {{domxref("Element.elementTiming")}}. ## Usage @@ -39,4 +43,5 @@ Good contenders for elements you might want to observe are: ## See also -- [Custom metrics](https://web.dev/custom-metrics/) +- {{domxref("PerformanceElementTiming")}} +- {{domxref("Element.elementTiming")}} diff --git a/files/en-us/web/html/element/img/index.md b/files/en-us/web/html/element/img/index.md index 46c65b4ab36f178..93333fca63a626f 100644 --- a/files/en-us/web/html/element/img/index.md +++ b/files/en-us/web/html/element/img/index.md @@ -118,6 +118,10 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib - `auto` - : Default: no preference for the decoding mode. The browser decides what is best for the user. +- {{htmlattrdef("elementtiming")}} + + - : Marks the image for observation by the {{domxref("PerformanceElementTiming")}} API. The value given becomes an identifier for the observed image element. See also the [`elementtiming`](/en-US/docs/Web/HTML/Attributes/elementtiming) attribute page. + - {{htmlattrdef("fetchpriority")}} {{experimental_inline}} - : Provides a hint of the relative priority to use when fetching the image. Allowed values: diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json index 8b8b8378f0760e3..e8d3ff16dda3df4 100644 --- a/files/jsondata/GroupData.json +++ b/files/jsondata/GroupData.json @@ -943,8 +943,7 @@ "/docs/Web/API/Resource_Timing_API", "/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API", "/docs/Web/API/User_timing_API", - "/docs/Web/API/User_timing_API/Using_the_User_Timing_API", - "/docs/Web/API/Element_timing_API" + "/docs/Web/API/User_timing_API/Using_the_User_Timing_API" ], "interfaces": [ "EventCounts",