PerformanceElementTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

PerformanceElementTiming.prototype.toJSON()

Beschreibung

toJSON() ist die Standard-Serialisierungsmethode des Interfaces PerformanceElementTiming. Sie liefert ein einfaches Objekt mit allen serialisierbaren Eigenschaften des Eintrags, zum Beispiel name, entryType, startTime, duration, renderTime, loadTime, intersectionRect, identifier, naturalWidth, naturalHeight, id und url.

Nützlich ist die Methode vor allem, wenn Messwerte der Element Timing API an einen Analyse-Server geschickt oder protokolliert werden sollen. PerformanceEntry-Objekte sind Host-Objekte: Ihre Eigenschaften sind Getter auf dem Prototyp. Deshalb ergibt eine Kopie per Spread-Syntax ({...entry}) nur ein leeres Objekt. JSON.stringify() ruft toJSON() dagegen automatisch auf.

Eine Ausnahme ist die Eigenschaft element. Sie verweist auf einen DOM-Knoten und lässt sich nicht serialisieren, deshalb fehlt sie im Ergebnis. intersectionRect wird als verschachteltes Objekt mit den Werten eines DOMRectReadOnly ausgegeben.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt mit den serialisierbaren Eigenschaften des PerformanceElementTiming-Eintrags, ohne element.

Beispiele

Element-Timing-Einträge beobachten und serialisieren

// HTML: <img src="hero.jpg" elementtiming="hero-bild" id="hero">
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.toJSON());
  }
});
observer.observe({ type: "element", buffered: true });

{ name: "image-paint", entryType: "element", startTime: 0, duration: 0, renderTime: 412.3, loadTime: 389.1, intersectionRect: { x: 0, y: 0, width: 1200, height: 600, ... }, identifier: "hero-bild", naturalWidth: 2400, naturalHeight: 1200, id: "hero", url: "https://example.com/hero.jpg" }

Messwerte per sendBeacon an einen Analyse-Endpunkt senden

const puffer = [];

new PerformanceObserver((list) => {
  // JSON.stringify ruft toJSON() automatisch auf
  puffer.push(...list.getEntries().map((e) => e.toJSON()));
}).observe({ type: "element", buffered: true });

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden" && puffer.length) {
    navigator.sendBeacon("/analytics/element-timing", JSON.stringify(puffer));
    puffer.length = 0;
  }
});

Unterschied zwischen Spread-Syntax und toJSON()

new PerformanceObserver((list) => {
  const [entry] = list.getEntries();
  if (!entry) return;
  console.log(Object.keys({ ...entry }));       // Getter liegen auf dem Prototyp
  console.log(Object.keys(entry.toJSON()).length > 0);
  console.log("element" in entry.toJSON());      // DOM-Knoten wird nicht serialisiert
}).observe({ type: "element", buffered: true });

[] true false

// Wichtig · Fallstricke

Browser-Unterstützung: Die Element Timing API ist experimentell und nur in Chromium-Browsern verfügbar (Chrome, Edge und Opera ab Version 77). Firefox und Safari unterstützen sie nicht. Prüfen Sie die Unterstützung vorher, zum Beispiel mit PerformanceObserver.supportedEntryTypes.includes("element").
Die Eigenschaft element fehlt im Ergebnis. Wenn Sie das Element zuordnen wollen, verwenden Sie id oder identifier, also den Wert des Attributs elementtiming.
Bei Bildern von fremden Ursprüngen ohne den Header Timing-Allow-Origin ist renderTime gleich 0. Nutzen Sie dann loadTime oder startTime als Ersatz.
Nur Elemente mit dem Attribut elementtiming erzeugen Einträge, außerdem werden nur Bilder und Textknoten erfasst.
Das zurückgegebene Objekt ist eine Momentaufnahme. Spätere Änderungen daran wirken sich nicht auf den Eintrag aus.

Siehe auch

JSON.stringify() PerformanceEventTiming.toJSON() PerformancePaintTiming.toJSON() PerformanceScriptTiming.toJSON() PerformanceServerTiming.toJSON()