PerformanceLongTaskTiming

Beschreibung

Lange Tasks, die den Hauptthread für 50 ms oder mehr blockieren, verursachen unter anderem folgende Probleme:

• Verzögerte Time to Interactive (TTI).
• Hohe/variable Eingabelatenz.
• Hohe/variable Ereignisverarbeitungslatenz.
• Stotternde Animationen und Scrollen.

Ein langer Task ist jede ununterbrochene Periode, in der der Haupt-UI-Thread für 50 ms oder länger beschäftigt ist. Häufige Beispiele umfassen:

• Lang laufende Ereignishandler.
• Aufwendige Neuberechnungen des Layouts und andere Neurenderungen.
• Arbeiten, die der Browser zwischen verschiedenen Durchläufen der Event-Schleife erledigt und die mehr als 50 ms dauern.

Lange Tasks beziehen sich auf den "verantwortlichen Browsing-Kontext-Container" oder kurz "den Container", das ist die oberste Seite, <iframe>, <embed> oder <object>, in dem der Task stattfand.

Für Tasks, die nicht innerhalb der obersten Seite stattfinden, und um herauszufinden, welcher Container verantwortlich für den langen Task ist, bietet das TaskAttributionTiming Interface die Eigenschaften containerId, containerName und containerSrc, die mehr Informationen über die Quelle des Tasks geben können.

PerformanceLongTaskTiming erbt von PerformanceEntry.

Instanz-Eigenschaften

Dieses Interface erweitert die folgenden PerformanceEntry Eigenschaften für Langtask-Timing-Performance-Einträge und klassifiziert sie wie folgt:

PerformanceEntry.duration Schreibgeschützt

Gibt einen DOMHighResTimeStamp zurück, der die verstrichene Zeit zwischen Beginn und Ende des Tasks mit einer Genauigkeit von 1 ms darstellt.

PerformanceEntry.entryType Schreibgeschützt

Gibt immer "longtask" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt einen der folgenden Strings zurück, der sich auf den Browsing-Kontext oder Frame bezieht, der dem langen Task 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

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

Dieses Interface unterstützt auch die folgenden Eigenschaften:

PerformanceLongTaskTiming.attribution Schreibgeschützt

Gibt eine Sequenz von TaskAttributionTiming Instanzen zurück.

Instanz-Methoden

PerformanceLongTaskTiming.toJSON()

Überschreibt die PerformanceEntry.toJSON() Methode, um eine JSON-Darstellung des PerformanceLongTaskTiming Objekts zurückzugeben.

Beispiele

Abrufen von langen Tasks

Um Informationen über Langtask-Timing zu erhalten, erstellen Sie eine PerformanceObserver Instanz und rufen dann deren observe() Methode auf, wobei Sie "longtask" als Wert der type Option übergeben. Sie müssen auch buffered auf true setzen, um Zugriff auf lange Tasks zu erhalten, die der Benutzeragent während der Konstruktion des Dokuments gepuffert hat. Der Rückruf 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 });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• TaskAttributionTiming