demo · v148

Style Cost Meter

Click "stress style" to invalidate the CSS on 1,600 cells in one frame. The PerformanceObserver below shows the resulting Long Animation Frame entry split into style time, render time, and total duration.

styleDuration

—
ms (last LoAF)

renderDuration

—
ms (last LoAF)

the code

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType !== "long-animation-frame") continue;
    console.log({
      duration: entry.duration,
      styleDuration: entry.styleDuration,           // NEW in 148
      forcedStyleDuration: entry.forcedStyleDuration, // NEW in 148
      renderDuration: entry.renderDuration,
    });
  }
});
observer.observe({ type: "long-animation-frame", buffered: true });

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗