Figure 1. Navigation timestamps (source).

The document navigation timestamps (in addition to those from Resource Timing) are:

1. startTime: Always 0.
2. unload event handler starts.
3. unload event handler completes.
4. domInteractive: timestamp when DOM construction is finished and interaction with it from JavaScript is possible.
5. DOMContentLoaded event handler starts.
6. DOMContentLoaded event handler completes.
7. domComplete: timestamp when the document and all sub-resources have finished loading.
8. load event handler starts.
9. load event handler completes.

The DOMContentLoaded event handler.

This example uses a PerformanceObserver, which notifies the caller about new navigation performance entries as they are recorded in the browser's performance timeline. The example uses the buffered option to access entries that were recorded before the observer was created.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const domContentLoadedTime =
      entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
    console.log(
      `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
    );
  });
});

observer.observe({ type: "navigation", buffered: true });

For more examples, see the property pages in the PerformanceNavigationTiming reference documentation.

• PerformanceNavigationTiming
• PerformanceResourceTiming