PerformanceNavigationTiming: domComplete property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2021.
The domComplete
read-only property returns a DOMHighResTimeStamp
representing the time immediately before the user agent sets the document's readyState
to "complete"
.
See also the complete
state of Document.readyState
which corresponds to this property and refers to the state in which the document and all sub-resources have finished loading. The state also indicates that the load
event is about to fire.
Value
A DOMHighResTimeStamp
representing the time immediately before the user agent sets the document's readyState
to "complete"
.
Examples
Logging DOM completion time
The domComplete
property can be used to log the time when the DOM is complete.
Example using a PerformanceObserver
, which notifies of new navigation
performance entries as they are recorded in the browser's performance timeline. Use the buffered
option to access entries from before the observer creation.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
});
});
observer.observe({ type: "navigation", buffered: true });
Example using Performance.getEntriesByType()
, which only shows navigation
performance entries present in the browser's performance timeline at the time you call this method:
const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
});
Specifications
Specification |
---|
Navigation Timing Level 2 # dom-performancenavigationtiming-domcomplete |
Browser compatibility
BCD tables only load in the browser