PerformanceEntry: entryType Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die schreibgeschützte entryType-Eigenschaft gibt einen String zurück, der den Typ des Performance-Metrik darstellt, den dieser Eintrag repräsentiert.

Alle unterstützten entryTypes sind durch die statische Eigenschaft PerformanceObserver.supportedEntryTypes verfügbar.

Wert

Ein String. Der Rückgabewert hängt vom Subtyp des PerformanceEntry-Objekts ab. Einige Subtypen haben mehr als einen entryType.

element

Meldet die Ladezeit von Elementen.

Die Instanz des Eintrags ist ein PerformanceElementTiming-Objekt.

event

Meldet Latenzen von Ereignissen.

Die Instanz des Eintrags ist ein PerformanceEventTiming-Objekt.

first-input

Meldet die First Input Delay (FID).

Die Instanz des Eintrags ist ein PerformanceEventTiming-Objekt.

largest-contentful-paint

Meldet das größte Rendering eines Elements auf dem Bildschirm.

Die Instanz des Eintrags ist ein LargestContentfulPaint-Objekt.

layout-shift

Meldet die Layout-Stabilität von Webseiten basierend auf den Bewegungen der Elemente auf der Seite.

Die Instanz des Eintrags ist ein LayoutShift-Objekt.

long-animation-frame

Meldet Instanzen von langen Animationsframes (LoAFs).

Die Instanz des Eintrags ist ein PerformanceLongAnimationFrameTiming-Objekt.

longtask

Meldet Instanzen von langen Aufgaben.

Die Instanz des Eintrags ist ein PerformanceLongTaskTiming-Objekt.

mark

Meldet Ihre eigenen benutzerdefinierten Performance-Markierungen.

Die Instanz des Eintrags ist ein PerformanceMark-Objekt.

measure

Meldet Ihre eigenen benutzerdefinierten Performance-Maßnahmen.

Die Instanz des Eintrags ist ein PerformanceMeasure-Objekt.

Meldet das Timing der Dokumentennavigation.

Die Instanz des Eintrags ist ein PerformanceNavigationTiming-Objekt.

paint

Meldet wichtige Momente der Dokumenten-Rendering während des Seitenladevorgangs (erste Zeichnung, erste inhaltsreiche Zeichnung).

Die Instanz des Eintrags ist ein PerformancePaintTiming-Objekt.

resource

Meldet Timing-Informationen für Ressourcen in einem Dokument.

Die Instanz des Eintrags ist ein PerformanceResourceTiming-Objekt.

taskattribution

Meldet die Art der Arbeit, die maßgeblich zu der langen Aufgabe beigetragen hat.

Die Instanz des Eintrags ist ein TaskAttributionTiming-Objekt.

visibility-state

Meldet das Timing von Änderungen des Sichtbarkeitsstatus der Seite, d.h. wenn ein Tab von Vordergrund zu Hintergrund wechselt oder umgekehrt.

Die Instanz des Eintrags ist ein VisibilityStateEntry-Objekt.

Beispiele

Filtern von Performance-Einträgen nach Typ

Die entryType-Eigenschaft kann nützlich sein, wenn spezifische Performance-Einträge herausgefiltert werden sollen. Zum Beispiel möchten Sie vielleicht alle Skript-Ressourcen überprüfen, daher würden Sie nach einem entryType von "resource" und einem initiatorType von "script" suchen.

js
const scriptResources = performance
  .getEntries()
  .filter(
    (entry) =>
      entry.entryType === "resource" && entry.initiatorType === "script",
  );
console.log(scriptResources);

Abrufen von Performance-Einträgen nach Typ

Sowohl Performance als auch PerformanceObserver bieten Methoden, die es ermöglichen, Performance-Einträge direkt nach Typ abzurufen. Sie benötigen nicht unbedingt die entryType-Eigenschaft dafür, stattdessen können Sie Performance.getEntriesByType() oder PerformanceObserverEntryList.getEntriesByType() verwenden.

Außerdem, wenn Sie mit einem PerformanceObserver beobachten, nimmt die observe()-Methode ein Array von entryTypes in ihrem Optionsobjekt an, bei dem Sie entscheiden können, welche Typen von Einträgen beobachtet werden sollen.

js
// Log all resource entries at this point
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(`${entry.name}'s duration: ${entry.duration}`);
});

// PerformanceObserver version
// Log all resource entries when they are available
function perfObserver(list, observer) {
  list.getEntriesByType("resource").forEach((entry) => {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["resource", "navigation"] });

Spezifikationen

Specification
Performance Timeline
# dom-performanceentry-entrytype

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
entryType

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch