PerformanceElementTiming

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

The PerformanceElementTiming interface of the 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.

PerformanceEntry PerformanceElementTiming

Instance properties

PerformanceElementTiming.element Read only Experimental

An Element representing the element we are returning information about.

PerformanceElementTiming.id Read only Experimental

A string which is the id of the element.

PerformanceElementTiming.identifier Read only Experimental

A string which is the value of the elementtiming attribute on the element.

PerformanceElementTiming.intersectionRect Read only Experimental

A DOMRectReadOnly which is the rectangle of the element within the viewport.

PerformanceElementTiming.loadTime Read only Experimental

A DOMHighResTimeStamp with the loadTime of the element.

PerformanceElementTiming.naturalHeight Read only Experimental

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.

PerformanceElementTiming.naturalWidth Read only Experimental

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.

PerformanceElementTiming.renderTime Read only Experimental

A DOMHighResTimeStamp with the renderTime of the element.

PerformanceElementTiming.url Read only Experimental

A string which is the initial URL of the resources request for images, 0 for text.

Instance methods

PerformanceElementTiming.toJSON() Experimental

Returns a JSON representation of the PerformanceElementTiming object.

Examples

In this example we have two elements which are being observed. We use the PerformanceObserver interface to create a list of performance measurement events. In our case observing the PerformanceEntry.entrytype element in order to use the PerformanceElementTiming interface.

Two entries will be output to the console. The first containing details of the image, the second with details of the text node.

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });

Specifications

Specification
Element Timing API
# sec-performance-element-timing

Browser compatibility

BCD tables only load in the browser