PerformanceLongTaskTiming

Beschreibung

Lange Aufgaben, die den Haupt-Thread mindestens 50 ms lang blockieren, verursachen unter anderem:

• Eine verzögerte Time to interactive (TTI).
• Hohe oder schwankende Latenz bei Eingaben.
• Hohe oder schwankende Latenz bei der Ereignisverarbeitung.
• Ruckelnde Animationen und Bildlaufvorgänge.

Eine lange Aufgabe ist jeder ununterbrochene Zeitraum, in dem der Haupt-UI-Thread mindestens 50 ms lang beschäftigt ist. Häufige Beispiele sind:

• Lange laufende Event-Handler.
• Aufwendige Reflows und andere Neudarstellungen.
• Arbeiten, die der Browser zwischen verschiedenen Durchläufen der Ereignisschleife ausführt und die länger als 50 ms dauern.

Lange Aufgaben beziehen sich auf den „culprit browsing context container“, kurz „Container“. Das ist die Seite auf oberster Ebene oder das <iframe>-, <embed>- oder <object>-Element, innerhalb dessen die Aufgabe aufgetreten ist.

Bei Aufgaben, die nicht innerhalb der Seite auf oberster Ebene auftreten, hilft die Schnittstelle TaskAttributionTiming dabei, den für die lange Aufgabe verantwortlichen Container zu ermitteln. Ihre Eigenschaften containerId, containerName und containerSrc können weitere Informationen über den Ursprung der Aufgabe liefern.

PerformanceLongTaskTiming erbt von PerformanceEntry.

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge vom Typ „long task timing“ und legt sie wie folgt fest:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die zwischen Beginn und Ende der Aufgabe verstrichene Zeit mit einer Auflösung von 1 ms angibt.

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "longtask" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt eine der folgenden Zeichenfolgen zurück, die den Browsing-Kontext oder Frame bezeichnet, dem die lange Aufgabe zugeordnet werden kann:

• "cross-origin-ancestor"
• "cross-origin-descendant"
• "cross-origin-unreachable"
• "multiple-contexts"
• "same-origin-ancestor"
• "same-origin-descendant"
• "same-origin"
• "self"
• "unknown"

PerformanceEntry.startTime Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt angibt, zu dem die Aufgabe begonnen hat.

Diese Schnittstelle unterstützt außerdem die folgenden Eigenschaften:

PerformanceLongTaskTiming.attribution Schreibgeschützt

Gibt eine Folge von TaskAttributionTiming-Instanzen zurück.

Instanzmethoden

PerformanceLongTaskTiming.toJSON()

Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das PerformanceLongTaskTiming-Objekt repräsentiert. Wird von JSON.stringify() automatisch aufgerufen.

Beispiele

Lange Aufgaben erfassen

Um Zeitinformationen zu langen Aufgaben abzurufen, erstellen Sie eine PerformanceObserver-Instanz und rufen Sie deren Methode observe() auf. Übergeben Sie dabei "longtask" als Wert der Option type. Setzen Sie außerdem buffered auf true, um Zugriff auf lange Aufgaben zu erhalten, die der User-Agent während der Erstellung des Dokuments zwischengespeichert hat. Die Callback-Funktion des PerformanceObserver-Objekts wird anschließend mit einer Liste von PerformanceLongTaskTiming-Objekten aufgerufen, die Sie analysieren können.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• TaskAttributionTiming