Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

PerformanceEntry: Eigenschaft name

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2017 browserübergreifend verfügbar.

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

Die schreibgeschützte Eigenschaft name der Schnittstelle PerformanceEntry ist eine Zeichenfolge, die den Namen eines Performance-Eintrags angibt. Sie dient als Bezeichner, muss aber nicht eindeutig sein. Der Wert hängt von der Unterklasse ab.

Wert

Eine Zeichenfolge. Der Wert hängt von der Unterklasse des PerformanceEntry-Objekts ab, wie in der folgenden Tabelle dargestellt.

Unterklasse Wert
[`InteractionContentfulPaint`](/de/docs/Web/API/InteractionContentfulPaint) Gibt immer eine leere Zeichenfolge zurück.
[`LargestContentfulPaint`](/de/docs/Web/API/LargestContentfulPaint) Gibt immer eine leere Zeichenfolge zurück.
[`LayoutShift`](/de/docs/Web/API/LayoutShift) Gibt immer "layout-shift" zurück.
[`PerformanceContainerTiming`](/de/docs/Web/API/PerformanceContainerTiming) Gibt immer eine leere Zeichenfolge zurück.
[`PerformanceElementTiming`](/de/docs/Web/API/PerformanceElementTiming) Eine der folgenden Zeichenfolgen:
  • "image-paint"
  • "text-paint"
[`PerformanceEventTiming`](/de/docs/Web/API/PerformanceEventTiming) Der Typ des zugehörigen Ereignisses.
[`PerformanceLongAnimationFrameTiming`](/de/docs/Web/API/PerformanceLongAnimationFrameTiming) Gibt immer "long-animation-frame" zurück.
[`PerformanceLongTaskTiming`](/de/docs/Web/API/PerformanceLongTaskTiming) Eine der folgenden Zeichenfolgen:
  • "cross-origin-ancestor"
  • "cross-origin-descendant"
  • "cross-origin-unreachable"
  • "multiple-contexts"
  • "same-origin-ancestor"
  • "same-origin-descendant"
  • "same-origin"
  • "self"
  • "unknown"
[`PerformanceMark`](/de/docs/Web/API/PerformanceMark) Der Name, der beim Erstellen der Markierung durch Aufruf von [`performance.mark()`](/de/docs/Web/API/Performance/mark) verwendet wurde.
[`PerformanceMeasure`](/de/docs/Web/API/PerformanceMeasure) Der Name, der beim Erstellen der Messung durch Aufruf von [`performance.measure()`](/de/docs/Web/API/Performance/measure) verwendet wurde.
[`PerformanceNavigationTiming`](/de/docs/Web/API/PerformanceNavigationTiming) Die aufgelöste URL der angeforderten Ressource. Beachten Sie, dass Textfragmente und andere Fragmentdirektiven darin nicht enthalten sind. Der Wert ändert sich auch dann nicht, wenn die Anfrage umgeleitet wird.
[`PerformancePaintTiming`](/de/docs/Web/API/PerformancePaintTiming) Eine der folgenden Zeichenfolgen:
  • "first-paint"
  • "first-contentful-paint"
[`PerformanceResourceTiming`](/de/docs/Web/API/PerformanceResourceTiming) Die aufgelöste URL der angeforderten Ressource. Dieser Wert ändert sich auch dann nicht, wenn die Anfrage umgeleitet wird.
[`PerformanceSoftNavigation`](/de/docs/Web/API/PerformanceSoftNavigation) Die neue URL, zu der navigiert wurde.
[`TaskAttributionTiming`](/de/docs/Web/API/TaskAttributionTiming) Gibt immer "unknown" zurück.
[`VisibilityStateEntry`](/de/docs/Web/API/VisibilityStateEntry) Eine der folgenden Zeichenfolgen:
  • "visible"
  • "hidden"

Beispiele

Performance-Einträge nach Namen filtern

Wenn PerformanceEntry ein PerformanceResourceTiming-Objekt ist, verweist die Eigenschaft name auf die aufgelöste URL der angeforderten Ressource. In diesem Fall kann die Eigenschaft name hilfreich sein, um bestimmte Ressourcen herauszufiltern, beispielsweise alle SVG-Bilder.

js
// Log durations of SVG resources
performance.getEntriesByType("resource").forEach((entry) => {
  if (entry.name.endsWith(".svg")) {
    console.log(`${entry.name}'s duration: ${entry.duration}`);
  }
});

Performance-Einträge anhand ihres Namens abrufen

Sowohl Performance als auch PerformanceObserver stellen Methoden bereit, mit denen Sie Performance-Einträge direkt anhand ihres Namens abrufen können. Dafür benötigen Sie nicht unbedingt die Eigenschaft name; stattdessen können Sie Performance.getEntriesByName() oder PerformanceObserverEntryList.getEntriesByName() verwenden.

js
// Log all marks named "debug-marks" at this point in time
const debugMarks = performance.getEntriesByName("debug-mark", "mark");
debugMarks.forEach((entry) => {
  console.log(`${entry.name}'s startTime: ${entry.startTime}`);
});

// PerformanceObserver version
// Log all marks named "debug-marks" when they happen
function perfObserver(list, observer) {
  list.getEntriesByName("debug-mark", "mark").forEach((entry) => {
    console.log(`${entry.name}'s startTime: ${entry.startTime}`);
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark"] });

Spezifikationen

Spezifikation
Performance Timeline
# dom-performanceentry-name

Browser-Kompatibilität

Siehe auch