PerformanceLongTaskTiming

Lange Aufgaben, die den Haupt-Thread für 50 ms oder mehr blockieren, verursachen unter anderem folgende Probleme:

• Verzögerung beim Time to interactive (TTI).
• Hohe/variable Eingabelatenz.
• Hohe/variable Ereignisverarbeitungslatenz.
• Ruckelige Animationen und Scrollen.

Eine lange Aufgabe ist jeder ununterbrochene Zeitraum, in dem der Haupt-UI-Thread für 50 ms oder länger beschäftigt ist. Häufige Beispiele umfassen:

• Lang laufende Ereignishandler.
• Teure Reflows und andere Neurenderungen.
• Arbeiten des Browsers zwischen verschiedenen Veranstaltungszyklus-Durchläufen, die 50 ms überschreiten.

Lange Aufgaben beziehen sich auf den "verantwortlichen Browsing-Kontext-Container", oder kurz "den Container", welcher die übergeordnete Seite, das <iframe>, das <embed> oder das <object> ist, innerhalb dessen die Aufgabe auftrat.

Für Aufgaben, die nicht innerhalb der obersten Seite auftreten und um herauszufinden, welcher Container für die lange Aufgabe verantwortlich ist, bietet die TaskAttributionTiming Schnittstelle die Eigenschaften containerId, containerName und containerSrc, die möglicherweise weitere Informationen über die Quelle der Aufgabe liefern.

PerformanceLongTaskTiming erbt von PerformanceEntry.

Diese Schnittstelle erweitert die folgenden PerformanceEntry Eigenschaften für Langaufgaben-Timing-Leistungseintragstypen, indem sie sie wie folgt qualifiziert:

PerformanceEntry.duration Schreibgeschützt Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die verstrichene Zeit zwischen Beginn und Ende der Aufgabe mit einer Granularität von 1 ms darstellt.

PerformanceEntry.entryType Schreibgeschützt Experimentell

Gibt immer "longtask" zurück

PerformanceEntry.name Schreibgeschützt Experimentell

Gibt einen der folgenden Strings zurück, der auf den Browsing-Kontext oder das Frame verweist, das der langen Aufgabe zugeschrieben 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 Experimentell

Gibt einen DOMHighResTimeStamp zurück, der die Zeit darstellt, zu der die Aufgabe begonnen hat.

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

PerformanceLongTaskTiming.attribution Schreibgeschützt Experimentell

Gibt eine Sequenz von TaskAttributionTiming Instanzen zurück.

PerformanceLongTaskTiming.toJSON() Experimentell

Gibt eine JSON-Darstellung des PerformanceLongTaskTiming-Objekts zurück.

Um Informationen zum Timing von langen Aufgaben zu erhalten, erstellen Sie eine Instanz von PerformanceObserver und rufen dann die Methode observe() auf, wobei Sie "longtask" als Wert der type-Option übergeben. Sie müssen auch buffered auf true setzen, um Zugang zu langen Aufgaben zu erhalten, die das Benutzergerät beim Erstellen des Dokuments gepuffert hat. Der Callback des PerformanceObserver-Objekts wird dann 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 });

• TaskAttributionTiming