PerformanceContainerTiming: Methode toJSON()

Syntax

toJSON()

Parameter

Keine.

Rückgabewert

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

Das JSON-Objekt enthält weder die Eigenschaft lastPaintedElement noch die Eigenschaft rootElement, da beide vom Typ HTMLElement sind und dieser 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-Wurzelelement mit der Kennung "hero" markiert ist. Der Abschnitt enthält zwei weitere Elemente, die gerendert werden und dadurch einen Eintrag zur Container-Performance erzeugen.

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

Beachten Sie, dass es außerdem verborgenes HTML (und Code) zur Anzeige von Protokollinformationen gibt.

<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 angezeigt, das auf die Elemente folgt.

Beachten Sie, dass in diesem Fall nur ein Eintrag protokolliert wird, obwohl das Container-Wurzelelement zwei Kindelemente hat, da beide Elemente im ersten Frame des Containers gerendert werden. Der Browser erzeugt für jedes Container-Wurzelelement pro Rendering-Frame höchstens einen PerformanceContainerTiming-Eintrag. Dabei werden alle Elemente zusammengefasst, die während dieses Frames gerendert 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