PerformanceElementTiming
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The PerformanceElementTiming
interface contains render timing information for image and text node elements the developer annotated with an 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:
<img>
elements,<image>
elements inside an<svg>
,- poster images of
<video>
elements, - elements which have a
background-image
, and - groups of text nodes, such as a
<p>
.
The author flags an element for observation by adding the elementtiming
attribute on the element.
PerformanceElementTiming
inherits from PerformanceEntry
.
Instance properties
This interface extends the following PerformanceEntry
properties for event timing performance entry types by qualifying them as follows:
PerformanceEntry.duration
Read only Experimental-
Always returns
0
asduration
does not apply to this interface. PerformanceEntry.entryType
Read only Experimental-
Always returns
"element"
. PerformanceEntry.name
Read only Experimental-
Returns
"image-paint"
for images and"text-paint"
for text. PerformanceEntry.startTime
Read only Experimental-
Returns the value of this entry's
renderTime
if it is not0
, otherwise the value of this entry'sloadTime
.
This interface also supports the following 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
Observing render time of specific elements
In this example two elements are being observed by adding the elementtiming
attribute. A 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
<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(entry);
});
});
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
Specification |
---|
Element Timing API # sec-performance-element-timing |
Browser compatibility
BCD tables only load in the browser
See also
elementtiming
HTML attribute