PerformanceElementTiming

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.

PerformanceElementTiming.element Read only

An Element representing the element we are returning information about.

PerformanceElementTiming.id Read only

A DOMString which is the id of the element.

PerformanceElementTiming.identifier Read only

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

PerformanceElementTiming.intersectionRect Read only

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

PerformanceElementTiming.loadTime Read only

A DOMHighResTimeStamp with the loadTime of the element.

PerformanceElementTiming.naturalHeight Read only

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

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

A DOMHighResTimeStamp with the renderTime of the element.

PerformanceElementTiming.url Read only

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

PerformanceElementTiming.toJSON()

Generates a JSON description of the object.

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) => {
  let entries = list.getEntries().forEach(function (entry) {
      console.log(entry);
  });
});
observer.observe({ entryTypes: ["element"] });