v145 · Web APIs · Budget Monitor

Container timing budget monitor

Assign per-container render budgets and watch each one go green or red as Chrome reports PerformanceContainerTiming entries. Mimics how real perf teams enforce SLOs at the component level.

budgets

Observer status: initialising…
header
renderTime
—
hero
renderTime
—
list
renderTime
—

code

const budgets = { 'header-block': 200, 'hero-block': 500, 'list-block': 800 };

const obs = new PerformanceObserver((list) => {
  for (const entry of list.getEntriesByType('container')) {
    const budget = budgets[entry.identifier];
    const over = entry.renderTime > budget;
    report(entry.identifier, entry.renderTime, budget, over);
  }
});
obs.observe({ type: 'container', buffered: true });

see also