Signatur
Beschreibung
Die schreibgeschützte Eigenschaft paintTime eines PerformancePaintTiming-Eintrags (Eintragstyp "paint") gibt an, wann der Browser im Schritt „Rendering aktualisieren“ die Arbeit am Hauptthread abgeschlossen und das Malen begonnen hat. Der Wert ist ein DOMHighResTimeStamp in Millisekunden, gemessen relativ zu performance.timeOrigin.
Wichtig ist der Unterschied zu presentationTime: paintTime markiert den Beginn der Malphase im Rendering-Prozess. presentationTime dagegen gibt an, wann die Pixel tatsächlich auf dem Bildschirm erscheinen. Dazwischen liegen Rasterisierung, Compositing und die Synchronisierung mit dem Bildschirm. startTime entspricht presentationTime, sofern der Browser diesen Wert liefert, ansonsten paintTime.
Nutzen Sie paintTime, wenn Sie Verzögerungen genauer eingrenzen möchten. Liegt paintTime früh, presentationTime aber spät, entsteht die Verzögerung im Compositor bzw. in der GPU-Pipeline und nicht im JavaScript- oder Layout-Code. Die Eigenschaft ist in allen Browsern gleich definiert (interoperabel). Deshalb eignet sie sich besser für Vergleiche zwischen Browsern als der implementierungsabhängige presentationTime-Wert.
Rückgabewert
performance.timeOrigin, zu dem die Malphase begann.Beispiele
First Contentful Paint mit PerformanceObserver auswerten
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`${entry.name}: paintTime = ${entry.paintTime.toFixed(1)} ms`);
}
});
// buffered: true liefert auch Einträge, die vor der Registrierung entstanden sind
observer.observe({ type: 'paint', buffered: true });Verzögerung zwischen Malbeginn und Anzeige ermitteln
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (!('paintTime' in entry)) {
console.log('paintTime wird nicht unterstützt, startTime:', entry.startTime);
continue;
}
// presentationTime kann fehlen oder null sein (implementierungsabhängig)
const shown = entry.presentationTime ?? entry.startTime;
const delay = shown - entry.paintTime;
console.log(`${entry.name}: Compositor/Anzeige-Verzögerung ${delay.toFixed(1)} ms`);
}
}).observe({ type: 'paint', buffered: true });Wert synchron auslesen und an Analytics senden
window.addEventListener('load', () => {
const fcp = performance
.getEntriesByName('first-contentful-paint', 'paint')[0];
if (!fcp) return;
const payload = JSON.stringify({
metric: 'FCP',
paintTime: Math.round(fcp.paintTime ?? fcp.startTime),
startTime: Math.round(fcp.startTime),
});
navigator.sendBeacon('/analytics', payload);
console.log(payload);
});// Wichtig · Fallstricke
- Browser-Unterstützung:
paintTimeist ein neuer Teil der Paint-Timing-Spezifikation (PaintTimingMixin) und zunächst nur in aktuellen Chromium-Browsern verfügbar. Prüfen Sie die Unterstützung mit'paintTime' in entryund greifen Sie sonst aufstartTimezurück. - Nicht mit
startTimegleichsetzen: Liefert der BrowserpresentationTime, iststartTimemeist später alspaintTime. Für den Wert „Inhalt sichtbar“ (FCP im Sinne der Web Vitals) iststartTimedie übliche Kennzahl. - Paint-Einträge gibt es nur für
first-paintundfirst-contentful-paint, jeweils einmal pro Dokument. Wird die Seite im Hintergrund-Tab geladen, entstehen sie möglicherweise gar nicht oder erst verspätet. - Aus Datenschutzgründen (Timing-Angriffe) können die Zeitstempel je nach Browser und Cross-Origin-Isolation vergröbert sein.
- Dieselbe Eigenschaft gibt es auch bei
LargestContentfulPaint, dort mit identischer Bedeutung.