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: name-Eigenschaft

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 name-Eigenschaft der PerformanceEntry Schnittstelle ist ein String, der den Namen eines Leistungseintrags darstellt. Sie fungiert als Bezeichner, muss jedoch nicht eindeutig sein. Der Wert hängt von der Unterklasse ab.

Wert

Ein String. Der Wert hängt von der Unterklasse des PerformanceEntry-Objekts ab, wie in der Tabelle unten gezeigt.

Unterklasse Wert
[`InteractionContentfulPaint`](/de/docs/Web/API/InteractionContentfulPaint) Gibt immer einen leeren String zurück.
[`LargestContentfulPaint`](/de/docs/Web/API/LargestContentfulPaint) Gibt immer einen leeren String zurück.
[`LayoutShift`](/de/docs/Web/API/LayoutShift) Gibt immer "layout-shift" zurück.
[`PerformanceElementTiming`](/de/docs/Web/API/PerformanceElementTiming) Einer der folgenden Strings:
  • "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) Einer der folgenden Strings:
  • "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 verwendet wurde, als die Markierung durch Aufruf von [`performance.mark()`](/de/docs/Web/API/Performance/mark) erstellt wurde.
[`PerformanceMeasure`](/de/docs/Web/API/PerformanceMeasure) Der Name, der verwendet wurde, als die Messung durch Aufruf von [`performance.measure()`](/de/docs/Web/API/Performance/measure) erstellt wurde.
[`PerformanceNavigationTiming`](/de/docs/Web/API/PerformanceNavigationTiming) Die aufgelöste URL der angeforderten Ressource. Beachten Sie, dass dies alle Textfragmente oder andere Fragmentdirektiven ausschließt. Der Wert ändert sich nicht, auch wenn die Anfrage umgeleitet wird.
[`PerformancePaintTiming`](/de/docs/Web/API/PerformancePaintTiming) Einer der folgenden Strings:
  • "first-paint"
  • "first-contentful-paint"
[`PerformanceResourceTiming`](/de/docs/Web/API/PerformanceResourceTiming) Die aufgelöste URL der angeforderten Ressource. Dieser Wert ändert sich nicht, auch wenn die Anfrage umgeleitet wird.
[`PerformanceSoftNavigation`](/de/docs/Web/API/PerformanceSoftNavigation) Die neue navigierte URL.
[`TaskAttributionTiming`](/de/docs/Web/API/TaskAttributionTiming) Gibt immer "unknown" zurück.
[`VisibilityStateEntry`](/de/docs/Web/API/VisibilityStateEntry) Einer der folgenden Strings:
  • "visible"
  • "hidden"

Beispiele

Leistungseinträge nach Name filtern

Wenn das PerformanceEntry-Objekt ein PerformanceResourceTiming Objekt ist, bezieht sich die name-Eigenschaft auf die aufgelöste URL der angeforderten Ressource. In diesem Fall kann die name-Eigenschaft nützlich 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}`);
  }
});

Leistungseinträge nach Name abrufen

Sowohl Performance als auch PerformanceObserver bieten Methoden, die es ermöglichen, Leistungseinträge direkt nach Name abzurufen. Man benötigt nicht unbedingt die name-Eigenschaft dafür, stattdessen kann man 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