PerformanceNavigationTiming: loadEventStart-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.

Die loadEventStart schreibgeschützte Eigenschaft gibt einen DOMHighResTimeStamp zurück, der die Zeit unmittelbar vor dem Start des load-Ereignishandlers des aktuellen Dokuments darstellt.

Wert

Ein DOMHighResTimeStamp, der die Zeit unmittelbar vor dem Start des load-Ereignishandlers des aktuellen Dokuments darstellt.

Beispiele

Messung der `load`-Ereignishandlerzeit

Die loadEventStart-Eigenschaft kann verwendet werden, um zu messen, wie lange es dauert, den load-Ereignishandler zu verarbeiten.

Dies ist nützlich, um die Zeit von lang andauernden load-Ereignishandlern zu messen.

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

Beispiel mit einem PerformanceObserver, der über neue navigation-Performance-Einträge benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, 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-Zeitleiste 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`);
  }
});