Signatur
Beschreibung
Die schreibgeschützte Eigenschaft presentationTime eines PerformanceElementTiming-Eintrags gibt an, wann der Frame mit dem beobachteten Element tatsächlich auf dem Bildschirm erschienen ist. Der Wert ist ein DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin. Die Eigenschaft gehört zum Paint-Timing-Mixin, das auch paintTime bereitstellt.
Der Unterschied zu paintTime: paintTime markiert den Zeitpunkt, an dem die Rendering-Engine den Frame zum Zeichnen fertig hat (Ende der Rendering-Phase). presentationTime kommt danach und berücksichtigt auch Compositing, GPU und die Bildschirmsynchronisation (VSync). Damit liegt der Wert näher an dem, was die Nutzerin oder der Nutzer wirklich sieht. renderTime entspricht presentationTime, wenn dieser Wert verfügbar ist, und sonst paintTime.
Einsetzen lässt sich das für das Real User Monitoring (RUM) wichtiger Elemente wie Hero-Bilder, Überschriften oder Produktfotos. Außerdem kann man die Differenz presentationTime - paintTime auswerten, um Verzögerungen in der Compositing- und Anzeige-Pipeline zu erkennen. Die Einträge kommen über einen PerformanceObserver mit dem Typ "element". Beobachtet werden nur Elemente, die das HTML-Attribut elementtiming haben.
Weil die Spezifikation den Wert als implementierungsabhängig einstuft, darf ein Browser null liefern, etwa wenn er den Anzeigezeitpunkt nicht ermitteln kann oder nicht offenlegen will. Prüfe den Wert deshalb vor der Verwendung immer.
Rückgabewert
performance.timeOrigin, zu dem das Element auf dem Bildschirm angezeigt wurde, oder null, wenn der Browser den Wert nicht bereitstellt.Beispiele
Anzeigezeitpunkt eines Hero-Bildes messen
// HTML: <img src="hero.jpg" elementtiming="hero-image" alt="">
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.identifier !== 'hero-image') continue;
const shown = entry.presentationTime ?? entry.renderTime;
console.log(`Hero-Bild sichtbar nach ${shown.toFixed(1)} ms`);
}
});
observer.observe({ type: 'element', buffered: true });Verzögerung zwischen Zeichnen und Anzeige ermitteln
// HTML: <h1 elementtiming="headline">Willkommen</h1>
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const { identifier, paintTime, presentationTime } = entry;
if (presentationTime == null || paintTime == null) {
console.log(`${identifier}: presentationTime nicht verfügbar`);
continue;
}
const delay = presentationTime - paintTime;
console.log(`${identifier}: Anzeige-Verzögerung ${delay.toFixed(1)} ms`);
}
}).observe({ type: 'element', buffered: true });Feature-Erkennung und Versand an ein RUM-Backend
const supportsElementTiming =
PerformanceObserver.supportedEntryTypes?.includes('element');
if (supportsElementTiming) {
new PerformanceObserver((list) => {
const payload = list.getEntries().map((entry) => ({
id: entry.identifier,
// Fallback-Kette: presentationTime -> renderTime -> loadTime
time: entry.presentationTime ?? entry.renderTime ?? entry.loadTime,
hasPresentationTime: 'presentationTime' in entry && entry.presentationTime != null,
}));
navigator.sendBeacon('/rum/element-timing', JSON.stringify(payload));
}).observe({ type: 'element', buffered: true });
} else {
console.log('Element Timing wird nicht unterstützt.');
}// Wichtig · Fallstricke
- Browser-Unterstützung: Die Element Timing API gibt es nur in Chromium-basierten Browsern (Chrome, Edge, Opera).
presentationTimeist erst in neueren Versionen dazugekommen. Firefox und Safari unterstützen die API nicht. Prüfe die Unterstützung mitPerformanceObserver.supportedEntryTypesund'presentationTime' in entry. - Kann
nullsein: Der Wert ist implementierungsabhängig. Verwende immer einen Fallback, zum Beispielentry.presentationTime ?? entry.renderTime. - Bilder von anderen Ursprüngen (Cross-Origin): Ohne den Antwort-Header
Timing-Allow-Originwerden Zeitangaben zum Rendern von Bildern fremder Ursprünge nur ungenau oder gar nicht offengelegt. Setze den Header deshalb auf dem CDN. - Einträge entstehen nur für Elemente mit dem Attribut
elementtiming, und zwar nur beim ersten Zeichnen. Ohnebuffered: trueverpasst man Einträge, die vor der Registrierung des Observers entstanden sind. - Die Werte sind aus Sicherheitsgründen (Fingerprinting, Spectre) in ihrer Genauigkeit reduziert. Sie eignen sich für statistische Auswertungen, nicht für Messungen auf die Mikrosekunde genau.