PerformanceContainerTiming: lastPaintedElement property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility
Learn more

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The lastPaintedElement read-only property of the PerformanceContainerTiming interface returns the element that contributed the largest newly-painted area in the frame that generated this entry.

This might be used during debugging to identify which specific piece of content is causing a large or complex container to keep generating entries.

Value

An HTMLElement, or null if there is none.

Examples

Logging the last painted element of a container

This example demonstrates how lastPaintedElement identifies the element responsible for the largest newly-painted area in each frame.

HTML

First we define a <section> element that is marked as a container root with the containertiming attribute identified as "hero", along with two buttons: one to add more content to the container, and one to reset it.

html

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

Note that there is also hidden HTML (and code) for displaying log information.

<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 = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

The following code first checks if there are any "container" entries: if not, it logs that the feature is not supported. It then creates a PerformanceObserver that logs each entry's lastPaintedElement.

const container = document.querySelector("section");
let count = 0;

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.");
}

We then define click event handlers to add a new paragraph to the container, triggering a new paint event and timing entry, and to reset the example.

document.querySelector("#add").addEventListener("click", () => {
  count++;
  const paragraph = document.createElement("p");
  paragraph.textContent = `New paragraph ${count}`;
  container.appendChild(paragraph);
});

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

Result

Click "Add element" to add new elements. Each element should trigger a new log showing that the newly-added paragraph is the lastPaintedElement for that entry. Then click "Reset" to restart the example.