PerformanceNavigationTiming: loadEventEnd-Eigenschaft

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2021 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die schreibgeschützte Eigenschaft loadEventEnd gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt unmittelbar nach Abschluss des Ereignishandlers für das load-Ereignis des aktuellen Dokuments darstellt.

Wert

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach Abschluss des Ereignishandlers für das load-Ereignis des aktuellen Dokuments darstellt.

Beispiele

Verarbeitungszeit des `load`-Ereignishandlers messen

Die Eigenschaft loadEventEnd kann verwendet werden, um zu messen, wie lange die Verarbeitung des load-Ereignishandlers dauert.

Dies ist nützlich, um die Dauer lang laufender load-Ereignishandler zu messen.

window.addEventListener("load", (event) => {
  // Some long running code
});

Beispiel mit einem PerformanceObserver, der über neue navigation-Performance-Einträge informiert, sobald diese in der Performance-Zeitachse des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers zuzugreifen.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
    if (loadEventTime > 0) {
      console.log(`${entry.name}: load event handler time: ${loadEventTime}ms`);
    }
  });
});

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

Beispiel mit Performance.getEntriesByType(), das nur navigation-Performance-Einträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitachse des Browsers vorhanden sind:

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  const loadEventTime = entry.loadEventEnd - entry.loadEventStart;
  if (loadEventTime > 0) {
    console.log(`${entry.name}:
      load event handler time: ${loadEventTime}ms`);
  }
});