PerformanceContainerTiming: Eigenschaft lastPaintedElement

Wert

Ein HTMLElement oder null, wenn kein solches Element vorhanden ist.

Beschreibung

Das lastPaintedElement wird für jeden Eintrag separat aus den Elementen ausgewählt, die in dem Rendering-Frame gezeichnet wurden, der den Eintrag erzeugt hat. Für jedes dieser Elemente ermittelt der Browser, wie viel neue Fläche sein Zeichenvorgang zur bereits gezeichneten Fläche des Containers hinzufügt – also den Teil der gezeichneten Fläche, der noch nicht darin enthalten ist. Das Element, das die größte neue Fläche hinzufügt, ist das lastPaintedElement.

Die Eigenschaft bezeichnet daher nicht unbedingt das Element, das zuletzt gezeichnet wurde, oder das größte Element, das in diesem Frame gezeichnet wurde.

Wenn Container-Wurzelelemente verschachtelt sind, tragen Zeichenvorgänge innerhalb des inneren Container-Wurzelelements auch zum äußeren bei. Das lastPaintedElement eines Eintrags für den äußeren Container kann daher innerhalb eines inneren Container-Wurzelelements liegen.

Die Eigenschaft kann bei der Fehlersuche helfen, den konkreten Inhalt zu identifizieren, der dazu führt, dass für einen großen oder komplexen Container weiterhin Einträge erzeugt werden.

Beispiele

Das zuletzt gezeichnete Element eines Containers protokollieren

Dieses Beispiel zeigt, wie lastPaintedElement in jedem Frame das Element mit der größten neu gezeichneten Fläche identifiziert.

HTML

Zunächst definieren wir ein <section>-Element, das durch sein containertiming-Attribut als Container-Wurzelelement mit der Kennung "hero" markiert ist. Außerdem fügen wir einen Button hinzu, mit dem sich das Beispiel zurücksetzen lässt.

<button id="reset">Reset</button>
<section containertiming="hero">
  <h2>Hero content</h2>
</section>

Beachten Sie, dass auch verborgenes HTML (und Code) zur Anzeige von Protokollinformationen vorhanden ist. Neue Protokolleinträge werden oben im Protokoll eingefügt.

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

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

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

JavaScript

Der folgende Code prüft zunächst, ob der Browser "container"-Einträge unterstützt. Falls nicht, protokolliert er, dass die Funktion nicht unterstützt wird. Anschließend erstellt er einen PerformanceObserver, der das lastPaintedElement jedes Eintrags protokolliert.

const container = document.querySelector("section");

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

Danach verwenden wir setInterval(), um dem Container jede Sekunde einen neuen Absatz hinzuzufügen. Nach fünf Absätzen wird dies beendet. Jeder Absatz löst einen neuen Zeichenvorgang und einen neuen Timing-Eintrag aus. Beachten Sie, dass wir Inhalte zeitgesteuert hinzufügen und nicht erst, wenn Benutzer auf einen Button klicken, da nach einer Interaktion mit der Seite keine Einträge mehr gemeldet werden (siehe Die Meldung endet nach dem Scrollen oder nach einer Benutzereingabe).

const maxParagraphs = 5;
let count = 0;

const timer = setInterval(() => {
  count++;
  const paragraph = document.createElement("p");
  paragraph.textContent = `New paragraph ${count}`;
  container.appendChild(paragraph);
  if (count >= maxParagraphs) {
    clearInterval(timer);
  }
}, 1000);

Zum Schluss fügen wir einen Click-Event-Handler hinzu, der das Beispiel durch erneutes Laden der Seite zurücksetzt.

document.querySelector("#reset").addEventListener("click", () => {
  window.location.reload();
});

Ergebnis

Jede Sekunde wird ein neuer Absatz hinzugefügt. Jeder Absatz sollte einen neuen Protokolleintrag auslösen, der zeigt, dass der neu hinzugefügte Absatz das lastPaintedElement dieses Eintrags ist. Klicken Sie auf den Button Reset, um das Beispiel neu zu starten.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• PerformanceContainerTiming.rootElement