PerformanceElementTiming：toJSON() 方法

实验性： 这是一项实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

PerformanceElementTiming 接口的 toJSON() 方法是一个序列化器；它返回 PerformanceElementTiming 对象的 JSON 表示形式。

语法

toJSON()

参数

无。

返回值

一个 JSON 对象，它是 PerformanceElementTiming 对象的序列化形式。

JSON 不包含 element 属性，因为它属于 Element 类型，该类型不提供 toJSON() 操作。但是，会提供元素的 id。

示例

使用 toJSON 方法

在此示例中，调用 entry.toJSON() 将返回 PerformanceElementTiming 对象的 JSON 表示形式，其中包含有关图像元素的信息。

html

<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 });

这将记录一个类似这样的 JSON 对象

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"
}

要获取 JSON 字符串，可以直接使用 JSON.stringify(entry)；它会自动调用 toJSON()。

规范

规范
元素计时 API # dom-performanceelementtiming-tojson

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

JSON