PerformanceElementTiming.id — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceElementTiming.id

Beschreibung

Die Eigenschaft id der Schnittstelle PerformanceElementTiming liefert als Zeichenkette den Wert des id-Attributs des beobachteten Elements. Sie gehört zur Element Timing API. Mit dieser API lässt sich messen, wann wichtige Bilder oder Textblöcke gerendert werden, zum Beispiel ein Hero-Bild oder eine Hauptüberschrift. Welche Elemente beobachtet werden, legt das HTML-Attribut elementtiming fest.

In der Praxis nutzt man id neben identifier (dem Wert von elementtiming), um einen Messwert eindeutig einem Element im DOM zuzuordnen. Das ist nützlich, wenn mehrere Elemente denselben elementtiming-Wert haben oder wenn Messwerte an ein Analyse-Backend geschickt werden. Auf das Element selbst kann man auch direkt über entry.element zugreifen. Diese Referenz ist jedoch null, sobald das Element nicht mehr im DOM ist oder in einem Shadow Tree liegt. Die id bleibt dagegen als einfache Zeichenkette erhalten.

Hat das Element kein id-Attribut, gibt die Eigenschaft eine leere Zeichenkette ("") zurück, nicht null.

Rückgabewert

Typ

string

Beschreibung

Der Wert des id-Attributs des zugehörigen Elements. Fehlt das Attribut, ist es eine leere Zeichenkette.

Beispiele

Renderzeit eines Hero-Bildes mit id protokollieren

// HTML: <img id="hero" src="hero.jpg" elementtiming="hero-image">
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.id} (${entry.identifier}) gerendert nach ${Math.round(entry.renderTime || entry.loadTime)} ms`);
  }
});

observer.observe({ type: 'element', buffered: true });

hero (hero-image) gerendert nach 812 ms

Messwerte nach Element-id an ein Analyse-Backend senden

// HTML: <h1 id="titel" elementtiming="headline">Willkommen</h1>
const messwerte = {};

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // Leere id abfangen – dann auf identifier zurückgreifen
    const schluessel = entry.id || entry.identifier || 'unbekannt';
    messwerte[schluessel] = entry.renderTime || entry.loadTime;
  }
});
observer.observe({ type: 'element', buffered: true });

// Beim Verlassen der Seite senden
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/analytics', JSON.stringify(messwerte));
  }
});

Unterstützung prüfen und leere id erkennen

if (PerformanceObserver.supportedEntryTypes?.includes('element')) {
  new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
      if (entry.id === '') {
        console.warn(`Element "${entry.identifier}" hat keine id`);
      }
    });
  }).observe({ type: 'element', buffered: true });
} else {
  console.info('Element Timing API wird nicht unterstützt');
}

Element "headline" hat keine id

// Wichtig · Fallstricke

Browser-Unterstützung: Nur Chromium-Browser unterstützen die Eigenschaft (Chrome, Edge und Opera ab Version 77). Firefox und Safari kennen die Element Timing API nicht. Prüfen Sie die Unterstützung vorher mit PerformanceObserver.supportedEntryTypes.includes('element').
Einträge entstehen nur für Elemente mit dem Attribut elementtiming. Ein id-Attribut allein reicht nicht aus.
Fehlt das id-Attribut, ist der Wert "" und nicht null. Prüfen Sie ihn deshalb auf Wahrheitswert, nicht auf null.
Der Wert ist eine Momentaufnahme zum Zeitpunkt des Renderns. Wird die id später per Skript geändert, ändert sich der Eintrag nicht.
Bei Bildern von anderen Ursprüngen ohne Timing-Allow-Origin-Header ist renderTime gleich 0. Die id steht trotzdem zur Verfügung.

Siehe auch

Element.id PerformanceElementTiming.element PerformanceElementTiming.url PerformanceElementTiming.loadTime PerformanceElementTiming.identifier