PerformanceElementTiming: toJSON() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
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.
<img src="image.jpg" alt="a nice image" elementtiming="big-image" id="myImage" /> 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:
{ "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
Loading…