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.elementRead only

An Element representing the element we are returning information about.

PerformanceElementTiming.idRead only

A DOMString which is the id of the element.

PerformanceElementTiming.identifierRead only

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

PerformanceElementTiming.intersectionRectRead only

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

PerformanceElementTiming.loadTimeRead only

A DOMHighResTimeStamp with the loadTime of the element.

PerformanceElementTiming.naturalHeightRead 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.naturalWidthRead 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.renderTimeRead only

A DOMHighResTimeStamp with the renderTime of the element.

PerformanceElementTiming.urlRead 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"] });