LayoutShift: 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 vor der Verwendung auf produktiven Webseiten.

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

Syntax

toJSON()

Parameter

Keine.

Rückgabewert

Ein JSON-Objekt, das die Serialisierung des LayoutShift-Objekts ist.

Beispiele

Verwendung der toJSON-Methode

In diesem Beispiel gibt der Aufruf von entry.toJSON() eine JSON-Darstellung des LayoutShift-Objekts zurück.

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

observer.observe({ type: "layout-shift", buffered: true });

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

json

{
  "name": "",
  "entryType": "layout-shift",
  "startTime": 246.39999999850988,
  "duration": 0,
  "value": 0.0071167845054842215,
  "hadRecentInput": false,
  "lastInputTime": 0,
  "sources": [
    {
      "previousRect": {
        "x": 917,
        "y": 708,
        "width": 706,
        "height": 248,
        "top": 708,
        "right": 1623,
        "bottom": 956,
        "left": 917
      },
      "currentRect": {
        "x": 693,
        "y": 708,
        "width": 1154,
        "height": 472,
        "top": 708,
        "right": 1847,
        "bottom": 1180,
        "left": 693
      }
    }
  ]
}

Um einen JSON-String zu erhalten, können Sie direkt JSON.stringify(entry) verwenden; diese Methode ruft automatisch toJSON() auf.

Spezifikationen

Specification
Layout Instability API # dom-layoutshift-tojson

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

JSON