PerformanceContainerTiming: Eigenschaft identifier

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die schreibgeschützte Eigenschaft identifier der Schnittstelle PerformanceContainerTiming gibt den Wert des Attributs containertiming am Wurzelelement des Containers zurück.

Damit lässt sich bestimmen, zu welchem Container-Wurzelelement ein Eintrag gehört. Das ist nützlich, wenn mehrere Container gleichzeitig erfasst werden. Dieser Ansatz ist einfacher als der Vergleich von rootElement-Referenzen.

Wert

Ein String.

Beispiele

Container mit `identifier` unterscheiden

Dieses Beispiel zeigt, wie Sie den betreffenden Container mithilfe von identifier bestimmen können.

HTML

Zunächst definieren wir zwei Elemente, die mit dem Attribut containertiming als Container-Wurzelelemente gekennzeichnet sind. Sie haben die Kennungen "hero" beziehungsweise "product-list".

html

<section containertiming="hero">
  <h2>Hero content</h2>
</section>
<div containertiming="product-list">
  <p>Product list content</p>
</div>

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

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

#log {
  height: 150px;
  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 für jeden Eintrag identifier und startTime protokolliert. So lassen sich die beiden Container unterscheiden.

if (PerformanceObserver.supportedEntryTypes.includes("container")) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      log(`${entry.identifier} painted at ${entry.startTime.toFixed(1)}`);
    }
  });
  observer.observe({ type: "container", buffered: true });
} else {
  log("This feature is not supported by your browser.");
}

Ergebnis

Das folgende Protokoll zeigt die für jeden der beiden Container erfassten Werte von identifier und startTime. Beachten Sie, dass die Startzeit in diesem Fall gleich ist, da beide im selben Frame gerendert werden.