v145 · Performance · demo

Content Section Timer

Three sections are annotated with containertiming. A PerformanceObserver catches each entry as the browser finishes painting that section.

Origin trial feature: containertiming requires the Container Timing origin trial token in Chrome 148. This demo shows real API usage with a realistic simulation fallback.
containertiming="hero"

Hero Section

[ hero image loading… ]
containertiming="article"

Article Body

containertiming="sidebar"

Sidebar Widget

Container Timing entries
hero
waiting…
article
waiting��
sidebar
waiting…
// Mark sections in HTML:
// <section containertiming="hero">…</section>
// <article containertiming="article">…</article>

// Observe in JavaScript:
const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(
      entry.identifier,   // "hero", "article", "sidebar"
      entry.renderTime,   // ms since navigation start
      entry.size          // { width, height } of container
    );
  }
});

observer.observe({ type: 'container-timing', buffered: true });

see also