PerformanceElementTiming: toJSON() method

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The toJSON() method of the PerformanceElementTiming interface is a serializer; it returns a JSON representation of the PerformanceElementTiming object.

Syntax

js

toJSON()

Parameters

None.

Return value

A JSON object that is the serialization of the PerformanceElementTiming object.

The JSON doesn't contain the element property because it is of type Element, which doesn't provide a toJSON() operation. The id of the element is provided, though.

Examples

Using the toJSON method

In this example, calling entry.toJSON() returns a JSON representation of the PerformanceElementTiming object, with the information about the image element.

html

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

js

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.identifier === "big-image") {
      console.log(entry.toJSON());
    }
  });
});
observer.observe({ type: "element", buffered: true });

This would log a JSON object like so:

json

{
  "name": "image-paint",
  "entryType": "element",
  "startTime": 670894.1000000238,
  "duration": 0,
  "renderTime": 0,
  "loadTime": 670894.1000000238,
  "intersectionRect": {
    "x": 299,
    "y": 76,
    "width": 135,
    "height": 155,
    "top": 76,
    "right": 434,
    "bottom": 231,
    "left": 299
  },
  "identifier": "big-image",
  "naturalWidth": 135,
  "naturalHeight": 155,
  "id": "myImage",
  "url": "https://en.wikipedia.org/static/images/project-logos/enwiki.png"
}

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

Specifications

Specification
Element Timing API
# dom-performanceelementtiming-tojson

Browser compatibility

BCD tables only load in the browser

See also