PerformanceNavigationTiming: loadEventStart-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Oktober 2021⁩.

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`);
  }
});