PerformanceNavigationTiming.domComplete — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.domComplete

Beschreibung

Die schreibgeschützte Eigenschaft domComplete des Interfaces PerformanceNavigationTiming enthält einen DOMHighResTimeStamp in Millisekunden. Er gibt an, wann der Browser document.readyState auf "complete" setzt, und zwar unmittelbar davor. Zu diesem Zeitpunkt ist das HTML geparst, alle Skripte mit defer sind ausgeführt und alle Teilressourcen wie Bilder, Stylesheets und iframes sind geladen. Direkt danach folgt das load-Ereignis, also loadEventStart.

Der Wert ist relativ zu startTime der Navigation. Bei Navigationseinträgen ist das 0, also der Beginn der Navigation (performance.timeOrigin). Deshalb lässt sich domComplete direkt als „Zeit bis das Dokument vollständig geladen war“ lesen.

Typische Einsätze sind Real User Monitoring (RUM) und Performance-Analysen. Aus domComplete - domInteractive ergibt sich zum Beispiel die Zeit, die nach dem Parsen noch für Teilressourcen und verzögerte Skripte vergeht. Aus domComplete - responseEnd ergibt sich die gesamte clientseitige Verarbeitung des Dokuments.

Den Eintrag bekommt man über performance.getEntriesByType("navigation")[0] oder über einen PerformanceObserver mit dem Typ "navigation".

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeit in Millisekunden seit Beginn der Navigation, unmittelbar bevor readyState auf "complete" wechselt. Solange dieser Zeitpunkt noch nicht erreicht ist, ist der Wert 0.

Beispiele

domComplete nach dem Laden auslesen

window.addEventListener('load', () => {
  const [nav] = performance.getEntriesByType('navigation');
  if (nav) {
    console.log(`DOM vollständig nach ${nav.domComplete.toFixed(1)} ms`);
  }
});

DOM vollständig nach 842.3 ms

Ladephasen berechnen

window.addEventListener('load', () => {
  // setTimeout: sicherstellen, dass alle Werte gesetzt sind
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    const phasen = {
      parsen: nav.domInteractive - nav.responseEnd,
      teilressourcen: nav.domComplete - nav.domInteractive,
      loadHandler: nav.loadEventEnd - nav.loadEventStart
    };
    console.table(phasen);
  }, 0);
});

┌────────────────┬────────┐ │ parsen │ 210.4 │ │ teilressourcen │ 398.7 │ │ loadHandler │ 3.1 │ └────────────────┴────────┘

Mit PerformanceObserver an ein RUM-Backend senden

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.domComplete > 0) {
      navigator.sendBeacon('/rum', JSON.stringify({
        url: entry.name,
        domComplete: Math.round(entry.domComplete)
      }));
    }
  }
});

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

// Wichtig · Fallstricke

Wert 0: Wenn man den Wert zu früh ausliest, etwa in einem Inline-Skript oder bei DOMContentLoaded, ist domComplete noch 0. Deshalb erst nach dem load-Ereignis auslesen oder PerformanceObserver mit buffered: true verwenden.
Ungenauigkeit: Zum Schutz vor Timing-Angriffen runden oder vergröbern Browser die Zeitstempel. Firefox rundet ohne Cross-Origin-Isolation zum Beispiel auf 1 ms oder gröber.
Veraltete API: Das alte performance.timing.domComplete aus Navigation Timing Level 1 liefert absolute Epoch-Zeitstempel. Es ist veraltet und sollte nicht mehr verwendet werden.
Kompatibilität: In allen modernen Browsern verfügbar, in Safari erst ab Version 15. Im Internet Explorer nicht vorhanden. Vorher mit 'PerformanceNavigationTiming' in window prüfen.
Der Wert wird stark von langsamen Teilressourcen beeinflusst, zum Beispiel von großen Bildern oder Werbe-iframes. Für die vom Nutzer wahrgenommene Geschwindigkeit sind Kennzahlen wie LCP oft aussagekräftiger.

Siehe auch

PerformanceNavigationTiming.confidence PerformanceNavigationTiming.domInteractive PerformanceNavigationTiming.type PerformanceNavigationTiming.loadEventEnd PerformanceNavigationTiming.redirectCount