DiePerformanceLongTaskTiming-Schnittstelle liefert Informationen über Aufgaben, die den UI-Thread für 50 Millisekunden oder länger blockieren.

Beschreibung

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

• Verzögerung beimTime 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 dieTaskAttributionTiming Schnittstelle die EigenschaftencontainerId,containerName undcontainerSrc, die möglicherweise weitere Informationen über die Quelle der Aufgabe liefern.

PerformanceLongTaskTiming erbt vonPerformanceEntry.

Instanzeigenschaften

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

PerformanceEntry.durationSchreibgeschütztExperimentell

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

PerformanceEntry.entryTypeSchreibgeschütztExperimentell

Gibt immer"longtask" zurück

PerformanceEntry.nameSchreibgeschütztExperimentell

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.startTimeSchreibgeschütztExperimentell

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

Diese Schnittstelle unterstützt auch die folgenden Eigenschaften:

PerformanceLongTaskTiming.attributionSchreibgeschütztExperimentell

Gibt eine Sequenz vonTaskAttributionTiming Instanzen zurück.

Instanzmethoden

PerformanceLongTaskTiming.toJSON()Experimentell

Gibt eine JSON-Darstellung desPerformanceLongTaskTiming-Objekts zurück.

Beispiele

Lange Aufgaben erfassen

Um Informationen zum Timing von langen Aufgaben zu erhalten, erstellen Sie eine Instanz vonPerformanceObserver und rufen dann die Methodeobserve() auf, wobei Sie"longtask" als Wert dertype-Option übergeben. Sie müssen auchbuffered auftrue setzen, um Zugang zu langen Aufgaben zu erhalten, die das Benutzergerät beim Erstellen des Dokuments gepuffert hat. Der Callback desPerformanceObserver-Objekts wird dann mit einer Liste vonPerformanceLongTaskTiming-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