Signatur
Beschreibung
Die Eigenschaft element der Schnittstelle PerformanceElementTiming enthält einen Verweis auf das Element, dessen Darstellungszeitpunkt gemessen wurde. Beobachtet werden Bilder und Textknoten, deren Element das Attribut elementtiming trägt, zum Beispiel <img elementtiming="hero" src="…">.
Mit der Eigenschaft kann man einen Messwert direkt dem konkreten DOM-Knoten zuordnen. Typische Anwendungen sind: das Element für Analysezwecke eindeutig beschreiben (Tag, ID, Klassen, src), es in den Entwicklerwerkzeugen hervorheben oder Messwerte nach Komponenten gruppieren. Die Eigenschaft identifier liefert nur den Wert des elementtiming-Attributs, element dagegen den ganzen Knoten.
Wichtig: Der Wert ist null, wenn das Element inzwischen aus dem Dokument entfernt wurde oder in einem Shadow-DOM liegt. Aus Datenschutzgründen werden solche Knoten nicht offengelegt. Man sollte deshalb immer auf null prüfen, bevor man auf den Knoten zugreift.
Rückgabewert
Element, oder null, wenn es nicht mehr mit dem Dokument verbunden ist oder in einem Shadow-Tree liegt.Beispiele
Hero-Bild beobachten und Element ausgeben
// HTML: <img src="hero.jpg" elementtiming="hero-bild" id="hero">
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const el = entry.element;
if (!el) continue; // Element wurde bereits entfernt
console.log(`${entry.identifier}: <${el.tagName.toLowerCase()} id="${el.id}">`,
`gerendert nach ${Math.round(entry.renderTime || entry.loadTime)} ms`);
}
});
observer.observe({ type: 'element', buffered: true });Aussagekräftigen Selektor für Analysedaten erzeugen
const beschreibe = (el) => {
if (!el) return '(entfernt)';
const id = el.id ? `#${el.id}` : '';
const klassen = [...el.classList].map((k) => `.${k}`).join('');
return `${el.tagName.toLowerCase()}${id}${klassen}`;
};
new PerformanceObserver((list) => {
const daten = list.getEntries().map((e) => ({
name: e.identifier,
selektor: beschreibe(e.element),
zeit: Math.round(e.renderTime || e.loadTime)
}));
navigator.sendBeacon('/analytics/element-timing', JSON.stringify(daten));
console.table(daten);
}).observe({ type: 'element', buffered: true });Langsam gerenderte Elemente in der Entwicklung markieren
const GRENZE_MS = 2500;
if (PerformanceObserver.supportedEntryTypes?.includes('element')) {
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const zeit = entry.renderTime || entry.loadTime;
if (zeit > GRENZE_MS && entry.element) {
entry.element.style.outline = '3px solid red';
console.warn('Langsam:', entry.identifier, `${Math.round(zeit)} ms`);
}
}
}).observe({ type: 'element', buffered: true });
} else {
console.info('Element Timing wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Immer auf
nullprüfen: Wurde das Element nach dem Rendern aus dem DOM entfernt (z. B. durch ein SPA-Routing) oder liegt es in einem Shadow-Root, liefertelementnull. - Nur markierte Elemente: Einträge entstehen nur für Elemente mit dem Attribut
elementtiming. Das Attribut muss schon vor dem Rendern gesetzt sein; wird es nachträglich per JavaScript hinzugefügt, gibt es keinen Eintrag. - Speicherlecks: Wer Einträge oder
entry.elementdauerhaft in Arrays speichert, verhindert die Speicherbereinigung entfernter Knoten. Besser nur abgeleitete Daten (Selektor, Zeit) aufbewahren. - Kompatibilität: Element Timing gibt es nur in Chromium-Browsern (Chrome/Edge 77+). Firefox und Safari unterstützen es nicht. Vorher mit
PerformanceObserver.supportedEntryTypes.includes('element')prüfen. renderTimeist bei ursprungsübergreifenden Bildern ohneTiming-Allow-Origin-Header0. Dann aufloadTimeausweichen.