PerformanceResourceTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceResourceTiming.prototype.toJSON()

Beschreibung

toJSON() ist der Serialisierer der Schnittstelle PerformanceResourceTiming. Die Methode erzeugt ein einfaches JavaScript-Objekt (keinen JSON-String!), das alle öffentlichen Eigenschaften des Timing-Eintrags als eigene, aufzählbare Eigenschaften enthält – etwa name, entryType, startTime, duration, initiatorType, nextHopProtocol, domainLookupStart, connectEnd, responseEnd, transferSize, encodedBodySize, decodedBodySize und (je nach Browser) serverTiming, renderBlockingStatus oder responseStatus.

Notwendig ist das, weil die Timing-Werte als Getter auf dem Prototyp liegen: Object.keys(entry) oder der Spread-Operator liefern daher ein leeres Objekt. JSON.stringify() ruft toJSON() automatisch auf, sodass ein Eintrag direkt serialisiert werden kann.

Typische Einsatzfälle sind Real User Monitoring (RUM): Ladezeiten von Skripten, Bildern oder API-Aufrufen werden gesammelt und per navigator.sendBeacon() oder fetch() an einen Analyse-Server geschickt, in localStorage abgelegt oder übersichtlich in der Konsole protokolliert.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit allen Eigenschaften des PerformanceResourceTiming-Eintrags (inklusive der von PerformanceEntry geerbten). serverTiming wird als Array einfacher Objekte übernommen.

Beispiele

Einzelnen Ressourcen-Eintrag als Objekt ausgeben

const [entry] = performance.getEntriesByType('resource');

if (entry) {
  const data = entry.toJSON();
  console.log(data.name, data.initiatorType, Math.round(data.duration));
  // Vergleich: Getter liegen auf dem Prototyp
  console.log(Object.keys(entry).length, Object.keys(data).length > 0);
}

https://example.com/app.js script 42 0 true

Laufende Ressourcen per PerformanceObserver sammeln und senden

const buffer = [];

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const { name, initiatorType, duration, transferSize, nextHopProtocol } = entry.toJSON();
    buffer.push({ name, initiatorType, duration: Math.round(duration), transferSize, nextHopProtocol });
  }
});
observer.observe({ type: 'resource', buffered: true });

// Beim Verlassen der Seite an den Server schicken
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && buffer.length) {
    navigator.sendBeacon('/rum', JSON.stringify(buffer.splice(0)));
  }
});

JSON.stringify() ruft toJSON() automatisch auf

const slowImages = performance
  .getEntriesByType('resource')
  .filter((e) => e.initiatorType === 'img' && e.duration > 200);

// Kein expliziter toJSON()-Aufruf nötig
const json = JSON.stringify(slowImages, ['name', 'duration', 'transferSize'], 2);
console.log(json);

[ { "name": "https://example.com/hero.jpg", "duration": 318.4, "transferSize": 245120 } ]

// Wichtig · Fallstricke

toJSON() gibt ein Objekt zurück, keinen String – für einen String JSON.stringify(entry) verwenden.
Bei Cross-Origin-Ressourcen ohne Timing-Allow-Origin-Header sind viele Werte (z. B. domainLookupStart, connectStart, transferSize) 0. Das ist gewollt und kein Fehler.
Welche Felder enthalten sind, hängt vom Browser ab: neuere Eigenschaften wie renderBlockingStatus, responseStatus oder deliveryType fehlen in älteren Versionen bzw. in Firefox/Safari.
Die Zeitwerte sind relativ zu performance.timeOrigin; für absolute Zeitstempel timeOrigin addieren.
Datenschutz: URLs in name können Tokens oder personenbezogene Query-Parameter enthalten – vor dem Versand ggf. bereinigen.
Der Ressourcenpuffer ist standardmäßig auf 250 Einträge begrenzt; ggf. performance.setResourceTimingBufferSize() nutzen oder einen PerformanceObserver verwenden.

Siehe auch

JSON.stringify() PerformanceLongTaskTiming.toJSON() PerformanceServerTiming.toJSON() PerformanceElementTiming.toJSON() PerformanceEventTiming.toJSON()