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:
|
| [`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:
|
| [`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:
|
| [`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:
|
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.
// 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.
// 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> |