v148 · Performance · Long Animation Frames

Animation Profiler

Profile the styleDuration and forcedStyleDuration contribution of different animation techniques. Chrome 148 adds these new fields to LoAF entries so you can finally tell style recalculation cost apart from layout and script time.

Checking styleDuration support…

Latest LoAF entry

Total duration—
Script duration—
Style duration (Chrome 148)—
Forced style (Chrome 148)—
Render duration—
Layout duration—

Breakdown chart

Total
Script
Style
Forced style

Captured LoAF entries

ScenarioTotal msscriptDurationstyleDurationforcedStyleDuration

Reading the new fields

const observer = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    const {
      duration,           // total frame time
      blockingDuration,   // blocking portion
      scriptDuration,     // JS execution
      styleDuration,      // Chrome 148: style recalculation
      forcedStyleDuration,// Chrome 148: forced/synchronous style
      renderDuration,     // paint + composite
      layoutDuration,     // layout cost
    } = entry;

    // Now you can tell apart "JS was slow" from "CSS was slow"
    const stylePercent = (styleDuration / duration) * 100;
    if (stylePercent > 30) flagStyleRegression(entry);
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

references

implementation reference

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