TaskAttributionTiming.toJSON() — Methode · JavaScript-Referenz

Signatur

TaskAttributionTiming.prototype.toJSON()

Beschreibung

Die Methode toJSON() gehört zum Interface TaskAttributionTiming der Long Tasks API. Sie liefert ein einfaches Objekt, das alle lesbaren Eigenschaften des Eintrags enthält: name, entryType, startTime, duration, containerType, containerSrc, containerId und containerName.

An TaskAttributionTiming-Objekte kommt man nicht direkt heran. Man erhält sie über die Eigenschaft attribution eines PerformanceLongTaskTiming-Eintrags. Diesen liefert wiederum ein PerformanceObserver mit dem Typ "longtask". Jeder Zuordnungseintrag beschreibt den Container (Fenster, iframe, embed oder object), in dem die lange Aufgabe lief.

Gebraucht wird die Methode vor allem für das Real User Monitoring. Die Zuordnungsdaten sollen dann protokolliert, per navigator.sendBeacon() an einen Analyse-Endpunkt geschickt oder gespeichert werden. JSON.stringify() ruft toJSON() automatisch auf. Ohne diese Methode würde die Serialisierung ein leeres Objekt liefern, weil die Eigenschaften als Getter auf dem Prototyp liegen.

Rückgabewert

Typ

Object

Beschreibung

Ein einfaches Objekt (kein JSON-String!) mit den Schlüsseln name, entryType, startTime, duration, containerType, containerSrc, containerId und containerName.

Beispiele

Zuordnung von Long Tasks ausgeben

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    for (const attribution of entry.attribution) {
      // Einfaches Objekt statt TaskAttributionTiming-Instanz
      console.log(attribution.toJSON());
    }
  }
});

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

{ name: 'unknown', entryType: 'taskattribution', startTime: 0, duration: 0, containerType: 'window', containerSrc: '', containerId: '', containerName: '' }

Automatische Serialisierung mit JSON.stringify()

const observer = new PerformanceObserver((list) => {
  const [entry] = list.getEntries();
  const [attribution] = entry.attribution;

  // JSON.stringify ruft toJSON() implizit auf
  console.log(JSON.stringify(attribution));
});

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

{"name":"unknown","entryType":"taskattribution","startTime":0,"duration":0,"containerType":"iframe","containerSrc":"https://ads.example.com/banner.html","containerId":"ad-slot","containerName":""}

Long-Task-Daten an einen Analyse-Endpunkt senden

if (PerformanceObserver.supportedEntryTypes?.includes('longtask')) {
  const observer = new PerformanceObserver((list) => {
    const payload = list.getEntries().map((entry) => ({
      startTime: entry.startTime,
      duration: entry.duration,
      attribution: entry.attribution.map((a) => a.toJSON()),
    }));

    navigator.sendBeacon('/analytics/longtasks', JSON.stringify(payload));
  });

  observer.observe({ type: 'longtask', buffered: true });
} else {
  console.info('Long Tasks API wird nicht unterstützt.');
}

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Long Tasks API und damit TaskAttributionTiming gelten als experimentell und gibt es nur in Chromium-Browsern. Vor der Nutzung sollte man mit PerformanceObserver.supportedEntryTypes.includes('longtask') prüfen, ob die API vorhanden ist.
Rückgabe ist kein String: toJSON() liefert ein Objekt. Einen JSON-String erzeugt erst JSON.stringify().
Wenig Aussagekraft einzelner Felder: name ist aktuell immer "unknown", startTime und duration sind immer 0. Wirklich nützlich sind die container*-Felder.
Datenschutz und Same-Origin: Bei Containern von fremden Ursprüngen können containerSrc, containerId und containerName leer sein. Daraus lässt sich nicht zuverlässig ablesen, welches Skript den Long Task verursacht hat.
Als Nachfolger für eine genauere Zuordnung auf Skriptebene gibt es in Chromium die Long Animation Frames API (PerformanceLongAnimationFrameTiming).

Siehe auch

JSON.stringify() LayoutShiftAttribution.toJSON() PerformanceTiming.toJSON() PerformanceEventTiming.toJSON() PerformanceNavigationTiming.toJSON()