PerformanceContainerTiming: Methode toJSON()

Syntax

toJSON()

Parameter

Keine.

Rückgabewert

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

Das JSON enthält weder die Eigenschaft lastPaintedElement noch die Eigenschaft rootElement. Beide sind vom Typ HTMLElement, der keine toJSON()-Operation bereitstellt.

Beispiele

Verwendung der Methode toJSON

Dieses Beispiel zeigt, wie die Methode toJSON() verwendet wird.

HTML

Zunächst definieren wir ein <section>-Element, das durch sein containertiming-Attribut als Container-Root mit der Kennung "hero" markiert ist. Der Abschnitt enthält zwei weitere Elemente, die gezeichnet werden und so einen Container-Performance-Eintrag erzeugen.

<section containertiming="hero">
  <h2>Hero content</h2>
  <p>The parent element of this paragraph is a container root.</p>
</section>

Beachten Sie, dass auch verborgenes HTML (und Code) zur Anzeige von Protokollinformationen vorhanden ist.

<pre id="log"></pre>

#log {
  height: 350px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

Der folgende Code prüft zunächst, ob der Browser Einträge vom Typ "container" unterstützt. Falls nicht, protokolliert er, dass die Funktion nicht unterstützt wird. Anschließend erstellt er einen PerformanceObserver, der jeden Eintrag protokolliert und dabei die Methode toJSON() direkt aufruft, um das JSON-Objekt zu erhalten. Danach wird der Observer gestartet und so gefiltert, dass er nur Einträge vom Typ "container" erfasst.

if (PerformanceObserver.supportedEntryTypes.includes("container")) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      log(JSON.stringify(entry.toJSON(), null, 2));
    }
  });
  observer.observe({ type: "container", buffered: true });
} else {
  log("This feature is not supported by your browser.");
}

Ergebnis

Die JSON-Ausgabe wird im Protokoll unterhalb der Elemente angezeigt.

Beachten Sie, dass in diesem Fall nur ein Eintrag protokolliert wird, obwohl der Container-Root zwei Kindelemente hat: Beide Elemente werden im ersten Frame des Containers gezeichnet. Der Browser erzeugt pro Container-Root und Rendering-Frame höchstens einen PerformanceContainerTiming-Eintrag. Dabei fasst er alle Elemente zusammen, die während dieses Frames gezeichnet werden.

Der Eintrag sollte ungefähr so aussehen:

{
  "name": "",
  "entryType": "container",
  "startTime": 77,
  "duration": 0,
  "identifier": "hero",
  "intersectionRect": {
    "x": 0,
    "y": 19.916666666666668,
    "width": 359.7,
    "height": 66.71666666666667,
    "top": 19.916666666666668,
    "right": 359.7,
    "bottom": 86.63333333333334,
    "left": 0
  },
  "size": 10519,
  "firstRenderTime": 77,
  "paintTime": 77,
  "presentationTime": null
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• JSON