PerformanceElementTiming: toJSON() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die toJSON() Methode des PerformanceElementTiming-Interfaces ist ein Serializer. Sie gibt eine JSON-Darstellung des PerformanceElementTiming-Objekts zurück.

Syntax

toJSON()

Parameter

Keine.

Rückgabewert

Ein JSON-Objekt, das die Serialisierung des PerformanceElementTiming-Objekts darstellt.

Das JSON enthält nicht die element-Eigenschaft, da diese vom Typ Element ist, der keine toJSON()-Operation bereitstellt. Die id des Elements wird jedoch bereitgestellt.

Beispiele

Verwendung der toJSON-Methode

In diesem Beispiel gibt der Aufruf von entry.toJSON() eine JSON-Darstellung des PerformanceElementTiming-Objekts zurück, mit Informationen über das Bildelement.

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

Dies würde ein JSON-Objekt wie folgt protokollieren:

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

Um einen JSON-String zu erhalten, können Sie JSON.stringify(entry) direkt verwenden; es wird automatisch toJSON() aufrufen.

Spezifikationen

Specification
Element Timing API # dom-performanceelementtiming-tojson

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

JSON