PerformanceLongTaskTiming

Instanzeigenschaften

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge vom Typ „long task“ mit den folgenden Festlegungen:

PerformanceEntry.duration Schreibgeschützt

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

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "longtask" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt einen der folgenden Strings zurück, der den Browsing-Kontext oder Frame bezeichnet, dem die lang andauernde 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 begann.

Diese Schnittstelle unterstützt außerdem die folgende Eigenschaft:

PerformanceLongTaskTiming.attribution Schreibgeschützt

Gibt eine Sequenz von TaskAttributionTiming-Instanzen zurück.

Instanzmethoden

PerformanceLongTaskTiming.toJSON()

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

Beschreibung

Lang andauernde Aufgaben, die den Hauptthread mindestens 50 ms lang blockieren, verursachen unter anderem:

• Eine verzögerte Time to Interactive (TTI).
• Eine hohe oder schwankende Eingabelatenz.
• Eine hohe oder schwankende Latenz bei der Ereignisverarbeitung.
• Ruckelnde Animationen und ruckelndes Scrollen.

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

• Lang laufende Event-Handler.
• Aufwendige Reflows und andere erneute Render-Vorgänge.
• Arbeiten, die der Browser zwischen verschiedenen Durchläufen des Event-Loops ausführt und die länger als 50 ms dauern.

Lang andauernde Aufgaben beziehen sich auf den „culprit browsing context container“, kurz „Container“. Dabei handelt es sich um die oberste Seite oder das <iframe>-, <embed>- oder <object>-Element, in dem die Aufgabe aufgetreten ist.

Für Aufgaben, die nicht innerhalb der obersten Seite auftreten, stellt die Schnittstelle TaskAttributionTiming die Eigenschaften containerId, containerName und containerSrc bereit. Diese können helfen, den für die lang andauernde Aufgabe verantwortlichen Container zu bestimmen und weitere Informationen über die Quelle der Aufgabe liefern.

Beispiele

Lang andauernde Aufgaben erfassen

Um Timing-Informationen zu lang andauernden Aufgaben zu erhalten, 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 lang andauernde Aufgaben zu erhalten, die der User-Agent während des Aufbaus des Dokuments zwischengespeichert hat. Der Callback 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