Back to Content

PerformanceLongAnimationFrameTiming: toJSON() method

files/en-us/web/api/performancelonganimationframetiming/tojson/index.md

latest2.1 KB
Original Source

{{APIRef("Performance API")}}{{SeeCompatTable}}

The toJSON() method of the {{domxref("PerformanceLongAnimationFrameTiming")}} interface is a {{Glossary("Serialization","serializer")}}; it returns a JSON representation of the PerformanceLongAnimationFrameTiming object.

Syntax

js-nolint
toJSON()

Parameters

None.

Return value

A {{jsxref("JSON")}} object that is the serialization of the {{domxref("PerformanceLongAnimationFrameTiming")}} object.

Examples

Using the toJSON method

In this example, calling entry.toJSON() returns a JSON representation of the PerformanceLongAnimationFrameTiming object.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.toJSON());
  });
});

observer.observe({ type: "long-animation-frame", buffered: true });

This would log an object like so:

js
({
  blockingDuration: 0,
  duration: 60,
  entryType: "long-animation-frame",
  firstUIEventTimestamp: 11801.099999999627,
  name: "long-animation-frame",
  renderStart: 11858.800000000745,
  scripts: [
    {
      duration: 45,
      entryType: "script",
      executionStart: 11803.199999999255,
      forcedStyleAndLayoutDuration: 0,
      invoker: "DOMWindow.onclick",
      invokerType: "event-listener",
      name: "script",
      pauseDuration: 0,
      sourceURL: "https://web.dev/js/index-ffde4443.js",
      sourceFunctionName: "myClickHandler",
      sourceCharPosition: 17796,
      startTime: 11803.199999999255,
      window: {
        // …Window object…
      },
      windowAttribution: "self",
    },
  ],
  startTime: 11802.400000000373,
  styleAndLayoutStart: 11858.800000000745,
});

To get a JSON string, you can use JSON.stringify(entry) directly; it will call toJSON() automatically.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also