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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die schreibgeschützte Eigenschaft loadEventStart gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt unmittelbar vor dem Start des Event-Handlers für das load-Ereignis des aktuellen Dokuments darstellt.

Wert

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar vor dem Start des Event-Handlers für das load-Ereignis des aktuellen Dokuments darstellt.

Beispiele

Verarbeitungszeit des `load`-Event-Handlers messen

Die Eigenschaft loadEventStart kann verwendet werden, um zu messen, wie lange die Verarbeitung des Event-Handlers für das load-Ereignis dauert.

Dies ist nützlich, um die Dauer lang laufender Event-Handler für das load-Ereignis zu messen.

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

Beispiel mit einem PerformanceObserver, der über neue navigation-Performance-Einträge benachrichtigt, sobald diese in der Performance-Zeitleiste 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 sich zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers befinden:

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