PerformanceElementTiming: renderTime property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The renderTime
read-only property of the PerformanceElementTiming
interface returns the render time of the associated element.
Value
A 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 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
Logging renderTime
In this example an <img>
element is 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. Calling entry.renderTime
returns the render time of the image element.
<img
src="image.jpg"
alt="a nice image"
elementtiming="big-image"
id="myImage" />
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.identifier === "big-image") {
console.log(entry.renderTime);
}
});
});
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 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:
Timing-Allow-Origin: https://developer.mozilla.org
Alternatively, you can use startTime
which returns the value of the entry's renderTime
if it is not 0
, and otherwise the value of this entry's loadTime
. However, it is recommended to set the 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:
const isRenderTime = entry.renderTime ? true : false;
Specifications
Specification |
---|
Element Timing API # ref-for-dom-performanceelementtiming-rendertime① |
Browser compatibility
BCD tables only load in the browser