Signatur
Beschreibung
Die schreibgeschützte Eigenschaft paintTime gehört zur Schnittstelle PerformanceSoftNavigation aus der experimentellen Soft Navigations API. Eine Soft Navigation ist ein Seitenwechsel in einer Single-Page-Application: Die URL ändert sich per history.pushState() oder Navigation API, und der Inhalt wird per JavaScript ausgetauscht, ohne dass ein echtes Laden des Dokuments stattfindet.
paintTime gibt den Zeitpunkt an, zu dem der Browser nach dieser Navigation den Rendering-Schritt (Stil, Layout) abgeschlossen hat und mit dem Zeichnen (Paint) des ersten Frames beginnt. Der Wert stammt aus dem gemeinsamen PaintTimingMixin, das auch von anderen Paint-Einträgen genutzt wird. Er ist relativ zu performance.timeOrigin, also in derselben Zeitbasis wie startTime.
Praktisch nutzt man paintTime, um zu messen, wie lange eine clientseitige Routenänderung braucht, bis die Nutzerin oder der Nutzer das Ergebnis tatsächlich sieht – etwa als Differenz paintTime - startTime. Damit lassen sich Kennzahlen ähnlich wie First Paint auch für SPA-Navigationen erheben, was mit klassischen Navigation-Timing-Einträgen nicht möglich ist.
Im Unterschied zu presentationTime, das (sofern unterstützt) den Zeitpunkt angibt, zu dem die Pixel tatsächlich auf dem Bildschirm erscheinen, ist paintTime in allen Implementierungen verfügbar und plattformunabhängig vergleichbar.
Rückgabewert
performance.timeOrigin, zu dem die Paint-Phase des ersten Frames nach der Soft Navigation begann.Beispiele
Soft Navigations beobachten und Zeit bis zum Paint messen
// Prüfen, ob der Browser den Eintragstyp kennt
if (PerformanceObserver.supportedEntryTypes?.includes('soft-navigation')) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const bisPaint = entry.paintTime - entry.startTime;
console.log(`Soft Navigation zu ${entry.name}: ${bisPaint.toFixed(1)} ms bis Paint`);
}
});
// buffered: true liefert auch bereits erfolgte Einträge
observer.observe({ type: 'soft-navigation', buffered: true });
} else {
console.log('Soft Navigations API wird nicht unterstützt');
}paintTime mit presentationTime vergleichen
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const { paintTime, presentationTime } = entry;
// presentationTime ist nicht überall verfügbar
if (presentationTime) {
console.log(`Paint → Anzeige: ${(presentationTime - paintTime).toFixed(1)} ms`);
} else {
console.log(`Nur paintTime verfügbar: ${paintTime.toFixed(1)} ms`);
}
}
});
observer.observe({ type: 'soft-navigation', buffered: true });Messwerte an ein Analytics-Backend senden
const sendeMetrik = (daten) => {
navigator.sendBeacon('/analytics/soft-nav', JSON.stringify(daten));
};
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
sendeMetrik({
url: entry.name,
navigationId: entry.navigationId,
paintMs: Math.round(entry.paintTime - entry.startTime)
});
}
}).observe({ type: 'soft-navigation', buffered: true });// Wichtig · Fallstricke
- Experimentell: Die Soft Navigations API gibt es derzeit nur in Chromium-basierten Browsern hinter einem Flag bzw. als Origin Trial. Firefox und Safari unterstützen sie nicht. Vor der Nutzung immer mit
PerformanceObserver.supportedEntryTypes.includes('soft-navigation')prüfen. Name und Form der Eigenschaften können sich noch ändern. - Eine Soft Navigation wird nur erkannt, wenn sie durch eine Nutzerinteraktion (z. B. Klick) ausgelöst wird, die URL ändert und das DOM sichtbar verändert. Programmatische URL-Wechsel ohne Interaktion erzeugen keinen Eintrag.
paintTimemarkiert den Beginn der Paint-Phase, nicht die tatsächliche Anzeige auf dem Bildschirm. Für den realen AnzeigezeitpunktpresentationTimeverwenden, falls vorhanden.- Zur Wahrung der Privatsphäre und zum Schutz vor Timing-Angriffen werden Zeitstempel vom Browser gerundet (grober, ohne Cross-Origin-Isolation).
- Einträge werden am besten per
PerformanceObservermitbuffered: truegelesen;performance.getEntriesByType('soft-navigation')funktioniert je nach Implementierung ebenfalls.