Signatur
Beschreibung
Die schreibgeschützte Eigenschaft presentationTime gehört zu PerformanceSoftNavigation. Diese Einträge vom Typ "soft-navigation" erzeugt der Browser, wenn eine Single-Page-Application per JavaScript die URL ändert (z. B. mit history.pushState()) und dabei nach einer Nutzerinteraktion sichtbar neuen Inhalt rendert. Solche „weichen“ Navigationen laden kein neues Dokument, sollen aber trotzdem messbar sein.
Die Eigenschaft kommt aus dem PaintTimingMixin der Paint-Timing-Spezifikation. Sie gehört zu paintTime: paintTime markiert den Zeitpunkt, an dem die Rendering-Phase abgeschlossen war. presentationTime markiert dagegen den Zeitpunkt, an dem der Compositor das Bild wirklich an das Display übergeben hat. Die Differenz der beiden Werte zeigt, wie viel Zeit Rasterisierung, Compositing und GPU-Pipeline nach dem Rendering noch brauchen.
Der Wert ist ein DOMHighResTimeStamp in Millisekunden relativ zu performance.timeOrigin. Du kannst ihn also direkt mit startTime desselben Eintrags oder mit performance.now() vergleichen. Typische Einsatzfälle sind RUM-Messungen (Real User Monitoring) für SPA-Routenwechsel und die Frage, wie schnell ein neuer Inhalt nach einem Klick für Nutzer wirklich sichtbar ist.
Rückgabewert
performance.timeOrigin), zu dem der Frame dargestellt wurde. Der Wert kann null sein, wenn die Implementierung keinen Darstellungszeitpunkt ermitteln kann oder ihn aus Datenschutzgründen nicht offenlegt.Beispiele
Soft-Navigationen beobachten und Darstellungszeit auslesen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`Route: ${entry.name}`);
console.log(`Start: ${entry.startTime.toFixed(1)} ms`);
console.log(`Paint: ${entry.paintTime?.toFixed(1)} ms`);
console.log(`Presentation: ${entry.presentationTime?.toFixed(1) ?? 'n/a'} ms`);
}
});
// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'soft-navigation', buffered: true });Zeit bis zur sichtbaren Darstellung und Compositing-Verzögerung messen
const report = (entry) => {
// Fallback auf paintTime, falls presentationTime nicht verfügbar ist
const shown = entry.presentationTime ?? entry.paintTime;
return {
url: entry.name,
timeToVisible: Math.round(shown - entry.startTime),
compositingDelay: entry.presentationTime != null
? Math.round(entry.presentationTime - entry.paintTime)
: null,
};
};
new PerformanceObserver((list) => {
const data = list.getEntries().map(report);
navigator.sendBeacon('/rum/soft-nav', JSON.stringify(data));
console.table(data);
}).observe({ type: 'soft-navigation', buffered: true });Feature-Erkennung vor der Nutzung
const supportsSoftNav =
typeof PerformanceObserver !== 'undefined' &&
PerformanceObserver.supportedEntryTypes.includes('soft-navigation');
if (supportsSoftNav && 'PerformanceSoftNavigation' in window &&
'presentationTime' in PerformanceSoftNavigation.prototype) {
console.log('presentationTime wird unterstützt');
} else {
console.log('Soft-Navigation-Timing nicht verfügbar');
}// Wichtig · Fallstricke
- Experimentell:
PerformanceSoftNavigationgibt es bisher nur in Chromium-basierten Browsern hinter einem Flag (chrome://flags/#enable-experimental-web-platform-features) oder über einen Origin Trial. Firefox und Safari unterstützen die Schnittstelle nicht. Prüfe die Unterstützung vorher immer überPerformanceObserver.supportedEntryTypes. - Kann
nullsein: Ohne verlässlichen Darstellungszeitpunkt liefert die Eigenschaftnull. Verwende deshalb?.oder??und nutzepaintTimeals Ersatzwert. - Nicht mit
startTimeverwechseln: Bei Soft-Navigationen markiertstartTimedie auslösende Nutzerinteraktion und nicht den Paint. - Datenschutz: Browser können den Wert gröber machen (z. B. auf 4 ms runden), um Timing-Angriffe zu erschweren. Für Aussagen im Sub-Millisekundenbereich eignet er sich daher nicht.
- Heuristik: Ein Eintrag entsteht nur, wenn eine Nutzerinteraktion, eine Änderung der URL und ein sichtbarer DOM-Paint zusammenkommen. Ein reines
pushState()ohne Interaktion erzeugt keinen Eintrag. - Die Spezifikation ist noch in Arbeit. Name und Verhalten können sich noch ändern.