PerformanceNavigationTiming.domContentLoadedEventStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.domContentLoadedEventStart

Beschreibung

Die schreibgeschützte Eigenschaft domContentLoadedEventStart gehört zur Navigation Timing API Level 2. Sie gibt einen DOMHighResTimeStamp in Millisekunden zurück. Er misst die Zeit relativ zum startTime des Navigationseintrags, der bei Navigationseinträgen immer 0 ist. Der Wert markiert den Moment, in dem der Browser das DOMContentLoaded-Event auslöst, also unmittelbar bevor der erste Handler dafür läuft.

Zu diesem Zeitpunkt ist das HTML vollständig geparst, und alle synchronen sowie defer-Skripte sind ausgeführt. Bilder, Stylesheets, die keine Skripte blockieren, und async-Skripte können dagegen noch laden. Deshalb ist der Wert eine wichtige Kennzahl dafür, wann das DOM benutzbar ist.

Meist verwendet man ihn zusammen mit domContentLoadedEventEnd. Die Differenz der beiden Werte zeigt, wie lange eigene DOMContentLoaded-Handler brauchen. Die Differenz zu domInteractive zeigt, wie lange defer-Skripte laufen.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt in Millisekunden relativ zum Beginn der Navigation, mit Nachkommastellen. Der Wert ist 0, solange das Event noch nicht ausgelöst wurde.

Beispiele

Wert nach dem Laden auslesen

window.addEventListener('load', () => {
  const [nav] = performance.getEntriesByType('navigation');
  console.log(`DOMContentLoaded startete nach ${nav.domContentLoadedEventStart.toFixed(1)} ms`);
});

DOMContentLoaded startete nach 412.3 ms

Dauer der DOMContentLoaded-Handler messen

document.addEventListener('DOMContentLoaded', () => {
  // aufwendige Initialisierung simulieren
  const t = performance.now();
  while (performance.now() - t < 50) {}
});

window.addEventListener('load', () => {
  const [nav] = performance.getEntriesByType('navigation');
  const dauer = nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart;
  console.log(`Handler-Laufzeit: ${dauer.toFixed(1)} ms`);
});

Handler-Laufzeit: 50.4 ms

Mit PerformanceObserver an das Monitoring senden

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const metriken = {
      deferSkripte: entry.domContentLoadedEventStart - entry.domInteractive,
      dclStart: entry.domContentLoadedEventStart,
      ttfb: entry.responseStart
    };
    navigator.sendBeacon('/analytics', JSON.stringify(metriken));
  }
});
observer.observe({ type: 'navigation', buffered: true });

// Wichtig · Fallstricke

Wenn Sie den Wert innerhalb eines DOMContentLoaded-Handlers lesen, ist domContentLoadedEventStart bereits gesetzt, domContentLoadedEventEnd aber noch 0. Lesen Sie beide Werte deshalb erst im load-Event oder mit setTimeout.
Die veraltete Eigenschaft performance.timing.domContentLoadedEventStart (Navigation Timing Level 1) liefert einen absoluten Unix-Zeitstempel und keinen relativen Wert. Beide Varianten lassen sich nicht direkt vergleichen. Die Level-1-API ist als veraltet markiert.
Browser runden die Genauigkeit der Zeitstempel ab, um Timing-Angriffe zu erschweren. Ohne crossOriginIsolated geschieht das zum Beispiel auf 100 µs bzw. 1 ms.
Wird die Seite aus dem Back/Forward-Cache wiederhergestellt, entsteht kein neuer Navigationseintrag. Der Wert bezieht sich dann auf den ursprünglichen Ladevorgang.
Im Browser gibt es keine Einschränkungen. In Web Workern ist die Eigenschaft nicht verfügbar.

Siehe auch

PerformanceNavigationTiming PerformanceNavigationTiming.domContentLoadedEventEnd PerformanceNavigationTiming.domInteractive PerformanceNavigationTiming.loadEventStart PerformanceNavigationTiming.loadEventEnd