PerformanceEntry.startTime — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceEntry.startTime

Beschreibung

Die Eigenschaft startTime liefert den Zeitpunkt, an dem ein Performance-Eintrag beginnt. Der Wert ist ein DOMHighResTimeStamp, also eine Gleitkommazahl in Millisekunden relativ zu performance.timeOrigin (in der Regel der Beginn der Navigation). Zusammen mit duration lässt sich so exakt berechnen, wann ein Vorgang begann und endete.

Was „Start“ genau heißt, hängt vom entryType ab:

mark: Zeitpunkt, an dem performance.mark() aufgerufen wurde (oder der per startTime-Option übergebene Wert).
measure: Zeitpunkt der Start-Markierung bzw. des übergebenen Startwerts.
resource: Wert von fetchStart – bei Weiterleitungen redirectStart, falls verfügbar.
navigation: immer 0.
paint: Zeitpunkt des Paints (z. B. first-contentful-paint).
longtask: Beginn der langen Aufgabe.
event: Zeitstempel des Ereignisses (event.timeStamp).
largest-contentful-paint: renderTime, falls vorhanden, sonst loadTime.

Typische Einsatzgebiete sind Real-User-Monitoring, das Aufbereiten von Web-Vitals, das Erstellen von Zeitleisten (Wasserfall-Diagramme) und das Sortieren oder Filtern von Einträgen nach ihrem Auftreten.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Startzeitpunkt in Millisekunden relativ zu performance.timeOrigin; kann Nachkommastellen enthalten. Bei navigation-Einträgen stets 0.

Beispiele

Start einer eigenen Messung auslesen

performance.mark('laden-start');

// simulierte Arbeit
for (let i = 0; i < 1e6; i++) {}

performance.mark('laden-ende');
const messung = performance.measure('laden', 'laden-start', 'laden-ende');

console.log(`Start: ${messung.startTime.toFixed(2)} ms`);
console.log(`Ende:  ${(messung.startTime + messung.duration).toFixed(2)} ms`);

Start: 132.40 ms Ende: 135.10 ms

Langsame Ressourcen mit Startzeit protokollieren

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 200) {
      console.log(
        `${entry.name} startete bei ${Math.round(entry.startTime)} ms, dauerte ${Math.round(entry.duration)} ms`
      );
    }
  }
});

observer.observe({ type: 'resource', buffered: true });

https://example.com/app.js startete bei 84 ms, dauerte 312 ms

First Contentful Paint ermitteln

new PerformanceObserver((list) => {
  const fcp = list.getEntriesByName('first-contentful-paint')[0];
  if (fcp) {
    console.log(`FCP nach ${Math.round(fcp.startTime)} ms`);
  }
}).observe({ type: 'paint', buffered: true });

FCP nach 640 ms

Relative Zeit in absolute Uhrzeit umrechnen

const [nav] = performance.getEntriesByType('resource');
if (nav) {
  const absolut = performance.timeOrigin + nav.startTime;
  console.log(new Date(absolut).toISOString());
}

2024-05-14T09:21:03.512Z

// Wichtig · Fallstricke

Relativer Wert: startTime ist kein Unix-Zeitstempel. Für eine absolute Zeit performance.timeOrigin + entry.startTime verwenden – nicht mit Date.now() mischen.
Reduzierte Genauigkeit: Zum Schutz vor Timing-Angriffen (Spectre) runden Browser den Wert ab bzw. versehen ihn mit Rauschen (z. B. 100 µs, in Firefox je nach Einstellung bis 1 ms). Volle Auflösung gibt es meist nur in cross-origin-isolierten Kontexten (COOP/COEP).
Cross-Origin-Ressourcen: startTime und duration sind auch ohne Timing-Allow-Origin-Header verfügbar, detaillierte Phasen (z. B. domainLookupStart) jedoch nicht.
Worker: In Web Workern bezieht sich der Wert auf den timeOrigin des Workers, nicht auf den der Seite – Werte aus unterschiedlichen Kontexten nicht direkt vergleichen.
Bei largest-contentful-paint kann renderTime für Cross-Origin-Bilder ohne Timing-Allow-Origin 0 sein; dann fällt startTime auf loadTime zurück.
Die Eigenschaft ist schreibgeschützt; Zuweisungen werden ignoriert (bzw. werfen im Strict Mode keinen Fehler, bleiben aber wirkungslos).

Siehe auch

Performance.now() Performance.mark() Performance.measure() PerformanceEntry.duration PerformanceEntry.entryType