Start · Sprachen · JavaScript · Referenz · PerformanceNavigationTiming.unloadEventEnd

PerformanceNavigationTiming.unloadEventEnd

Eigenschaft

Liefert als <code>DOMHighResTimeStamp</code> den Zeitpunkt direkt nach dem Ende des <code>unload</code>-Handlers des vorherigen Dokuments oder <code>0</code>.

seit JavaScript Navigation Timing Level 2 – Baseline: alle moderne Kategorie: webapi

Signatur

PerformanceNavigationTiming.unloadEventEnd

Beschreibung

Die schreibgeschützte Eigenschaft unloadEventEnd gehört zu PerformanceNavigationTiming. Sie gibt einen DOMHighResTimeStamp in Millisekunden zurück, gemessen relativ zu performance.timeOrigin. Der Wert markiert den Moment, in dem der unload-Event-Handler des vorherigen Dokuments fertig ist.

Zusammen mit unloadEventStart zeigt die Eigenschaft, wie lange das Entladen der vorherigen Seite gedauert hat (unloadEventEnd - unloadEventStart). Das hilft zu erkennen, ob aufwendige unload-Logik, etwa synchrone Analytics-Aufrufe, die Navigation zur neuen Seite bremst.

Der Wert ist 0, wenn es kein vorheriges Dokument gibt (z. B. ein neuer Tab oder direkt eingegebene URL) oder wenn das vorherige Dokument bzw. eine Weiterleitung von einem anderen Ursprung stammt und die Same-Origin-Prüfung nicht besteht.

Rückgabewert

Typ
DOMHighResTimeStamp (number)
Beschreibung
Zeitstempel in Millisekunden relativ zu performance.timeOrigin. Ist 0, wenn kein vorheriges Dokument gleichen Ursprungs vorhanden ist.

Beispiele

Dauer des unload-Handlers der Vorgängerseite messen

const [nav] = performance.getEntriesByType('navigation');

if (nav && nav.unloadEventEnd > 0) {
  const dauer = nav.unloadEventEnd - nav.unloadEventStart;
  console.log(`unload-Handler dauerte ${dauer.toFixed(1)} ms`);
} else {
  console.log('Kein vorheriges Dokument gleichen Ursprungs');
}
unload-Handler dauerte 3.4 ms

Per PerformanceObserver erfassen und an Analytics senden

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const unloadMs = entry.unloadEventEnd - entry.unloadEventStart;
    navigator.sendBeacon('/metrics', JSON.stringify({
      type: entry.type,           // 'navigate', 'reload', 'back_forward'
      unloadMs,
      unloadEnd: entry.unloadEventEnd
    }));
  }
});

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

Langsames Entladen bei Seitenwechseln erkennen

const [nav] = performance.getEntriesByType('navigation');
const SCHWELLE_MS = 50;

const unloadMs = nav.unloadEventEnd - nav.unloadEventStart;
if (nav.unloadEventEnd !== 0 && unloadMs > SCHWELLE_MS) {
  console.warn(`Vorherige Seite blockierte die Navigation ${Math.round(unloadMs)} ms lang`);
}

console.log({
  unloadEventEnd: nav.unloadEventEnd,
  vorFetchStart: nav.unloadEventEnd <= nav.fetchStart
});
{ unloadEventEnd: 0, vorFetchStart: true }

// Wichtig · Fallstricke

  • Häufig 0: Bei Seiten ohne Vorgänger und bei Navigationen von einem anderen Ursprung, auch über ursprungsfremde Weiterleitungen, ist der Wert 0. Prüft das vor dem Rechnen, sonst kommen irreführende Zahlen heraus.
  • Nicht mit dem aktuellen Dokument verwechseln: Der Wert betrifft das Entladen der vorherigen Seite, nicht der aktuellen.
  • Das unload-Ereignis gilt als veraltet: Chrome schränkt es schrittweise ein, und es verhindert den Back/Forward-Cache. Nutzt stattdessen pagehide oder visibilitychange. Auf Seiten ohne unload-Handler ist die Dauer meist nahe 0.
  • Kein Eintrag bei bfcache-Wiederherstellung: Wird eine Seite aus dem Back/Forward-Cache geladen, entsteht kein neuer Navigations-Eintrag.
  • Genauigkeit: Zum Schutz vor Timing-Angriffen runden die Browser Zeitstempel ab. Ohne Cross-Origin-Isolation liegt die Auflösung oft bei 100 µs bis 1 ms.
  • Die veraltete Eigenschaft performance.timing.unloadEventEnd liefert dagegen eine absolute Epoch-Zeit. Bitte nicht mehr verwenden.